Entersquare Inc.

【summernote + elFinder 】WYSIWYG editorのsummernoteに画像アップロードとファインダ機能をつける

【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>

この記事はあなたの役に立ちましたか？