WYSIWYGエディター 削除機能追加
北海道のSTUDIO KEYさんがMITライセンスで配布しているWYSIWYGエディターを利用してみました。基本機能は付いているのでかなり実装の時間を短縮できます。今回は、独自のMVCフレームワークの中に、コードを分割して、少し機能拡張して、組み込みました。配布しているバージョンでは無料配布のため、削除ボタンがついていないのだと思われますが、MITライセンスということで、削除ボタンがついたバージョンを公開しようと思います。
WYSIWYGエディターのコードを読んでみると、jqeuryのプラグインでしたので、改めてプラグインの構造の勉強にもなました。特に、コアな部分は、アップロードと、アップロードした画像をリスト形式で表示している部分です。このあたりは、非同期で動いていており、表示に関しては、xmlをajaxで読み込むという形でした。
削除ボタンの実装として、こららもajaxで非同期実装しました。今回追加したコードは下記の通りです。おそらく、この記事を読まれている方は、プログラマーの方だと思われますので、実装の参考程度に、参照ください。
Editor/skeditor/editor.min.js
b.ajax({
async : !1,
dataType: "xml",
url : a.manager + "studiokeyEditorImageList.php"
}).done(function (a) {
b("#edt_img_Loader").remove();
b(a)
.find("item")
.each(function () {
var a;
a = "" + ("<h4>" + b(this).find("time").text() + "<button id ='" + b(this).find("file").text() + "'>" + editorLanguage.img_Delete + " </button></h4>");
a += '<img src="' + b(this)
.find("file")
.text() + '" data-filename="' + b(this)
.find("file")
.text() + '" title="' + editorLanguage.imgList_insert + '" alt=""/>';
a += "";
b("<li id=" + remove( b(this).find("file").text()) + "></li>")
.html(a)
.appendTo("#edt_img_list ul")
})
}).fail(function (a) {
b("#edt_img_Loader").remove();
b("#edt_img_list").prepend('<div id="edt_ListError" style="color:red">' +
editorLanguage.err_imgList + "</div>")
}).always(function(){
var ds;
b("button").click(function(){
ds = $(this).attr("id");
b.ajax({
url: 'wysiwyg_delet.php',
type: 'post',
data: {'data': ds},
timeout: 10000,
dataType: 'text'
}).done(function(data) {
}).fail(function() {
}).always(function() {
b('#edt_img_list ul li#'+ remove(ds)).hide();
})
});
})
);
リストを表示する$.ajax()の部分に.alwaysメソッドを追加しました。alwaysの中では、ボタンに追加したidから取得するファイルのパスを、ajaxでPOST送信を行い、削除処理するwysiwyg_delet.phpにアクセスしています。また、削除が成功した場合には、画像リストのliにつけた、idをhide()で隠すようにしています。また、随時、remove()を使っていますが、こちらは、自作した関数でidに添付する文字にハイフンやドット、アンダースコアがあるので、こちらを取り除くための処理です。こらちらの関数は、同ファイルの一番下に追加しました。
function remove(str){
var name = str.replace(/\-|\/|\./g,'');
return name;
};
そのほかに、Editor/skeditor/language.jsに定義されている、オブジェクトの中に、ボタンタイトルの「削除」を定義する。
var editorLanguage = {
// 省略
,'img_Delete' :'削除'
};
追加したファイルとしては、wysiwyg_delet.php でこちらは、ただの$POSTデータを受け取って、unlink()で削除するだけの内容です。
また、ダウンロード後の設置に関しては、wysiwyg.htmlにある設定部分を設定してください。設定がない場合は、editor.min.jsに設定してあるデフォルト部分が反映されますので、変更する必要のない箇所はこちらにまとめてもよいかもしれません。
<script type="text/javascript">
jQuery.event.add(window,"load",function(){
jQuery('#MyEditor').myEditor({
'siteUrl': 'http://root/sample/wysiwyg-add-delete/' //アップロードフォルダーのあるURL 末尾スラッシュ必須
,'manager':'Editor/imagemanager/'
,'img_icon':'Editor/skeditor/icon.png'
,'img_loder':'Editor/skeditor/loader.gif'
,'ifHeight':'500px'
,'txHeight':'500px'
,'uploadFileMax':2000000 //1048576=1MB
});
});
</script>
そのほかには、Editor/imagemanager/config.phpに設定してある定数を変更してください。
<?php
define('upmax', 1000000); //アップロードするファイルの上限
define('dir_separater', '/'); //DIRECTORY_SEPARATOR
define('upload_dir_mane', '../../wysiwygUpload'.dir_separater); //imagemanagerから見たアップロードディレクトリの位置
define('upload_dir_editor', 'wysiwygUpload'.dir_separater); //editorから見たアップロードディレクトリの位置
define('listmax', 50); //リスト上の画像の上限
また、こらちの設定にかんするサポートなどは、STUDIO KEYさん同様行っておりませんので、ご自身の判断でご利用ください。