【summernote + elFinder 】WYSIWYG editorのsummernoteに画像アップロードとファインダ機能をつける
WYSIWYG editorのsummernoteに、
画像アップロードとファインダ機能を付けたかったので、
elFinderを入れました。
前提条件
- summernote(v0.8.8)
- elFinder(elFinder-2.1.37)
- Bootstrap(4.X.X)
- jquery(3.2.1)
- jquery UI(1.12.)
作業時のバージョンです。異なるバージョンでの動作は確認していません。
上記全てがすでにインストールされ、それぞれ正常に動いている事を前提条件とします。
summernoteにプラグインを追加する
summernoteのGitHubよりプラグインをダウンロードします。
https://github.com/semplon/summernote-ext-elfinder
summernoteを初期化する
通常通り初期化します。fontNamesのinsertの中に[elfinder]を追加します。
$('#editor1').summernote({
height: 300,
lang: "ja-JP",
fontNames: ["YuGothic","Yu Gothic","Hiragino Kaku Gothic Pro","Meiryo","sans-serif", "Arial","Arial Black","Comic Sans MS","Courier New","Helvetica Neue","Helvetica","Impact","Lucida Grande","Tahoma","Times New Roman","Verdana"],toolbar: [
['style', ['style']],
['style', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
['fontname', ['fontname']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['table', ['table']],
['insert', ['link', 'picture', 'video', 'hr', 'elfinder','readmore']],
['view', ['fullscreen', 'codeview']],
['help', ['help']]
]
});elFinderの関数を作る
次にelFinderの関数を書きます。
function elfinderDialog(context){
var fm = $('<div/>').dialogelfinder({
url : 'your path/elFinder-2.1.37/php/connector.minimal.php',
height: 700,
destroyOnClose : true,
getFileCallback : function(files, fm) {
console.log(files);
context.invoke('editor.insertImage', fm.convAbsUrl(files.url));
},
commandsOptions : {
getfile : {
oncomplete : 'close',
folders : false
}
}
}).dialogelfinder('instance');
}htmlファイルに実装する
summernoteのプラグイン、先ほど作成したjs、elFinderを読み込みます。
jquery uiを忘れないようにします。
なお、Bootstrapは省略しています。
<!--jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!--summernote elFiner-->
<script src="your path /summernote/summernote-ext-elfinder.js" type="text/javascript"></script>
<script src="your path /elFinder-2.1.37/js/elfinder.full.js" type="text/javascript"></script>
<script src="your path /summernote.js" type="text/javascript"></script>最後にhtmlを設置して完了です。
<textarea id="editor1">デフォルトの文章が入ります</textarea>
