WordPressにも使われているTinyMCEを使用して、Laravel5にリッチエディタを導入してみた。

WordPressにも使われているTinyMCEを使用して、Laravel5にリッチエディタを導入してみた。

参考URL
http://qiita.com/qwe001/items/9a86839db4da5a7ab763

TinyMCEだけでは画像アップロード出来ないので、jbimagesというプラグインも使う。

1, /public/js/tinymceに、ダウンロードしてきたフォルダをアップロードする。
https://www.tinymce.com/download/

2, /public/js/tinymce/plugins/jbimagesに、ダウンロードしてきたフォルダ(名前をjbimagesにする)をアップロードする。
https://www.tinymce.com/download/

3, 画像アップロード先を指定する。
/public/js/tinymce/plugins/jbimages/config.php

4, リッチエディタを表示するbladeファイルを作る。

5, ブラウザでアクセスしてみる。上記の設定だと、こんな感じになるはず。
文字操作のツールバーに、どんな種類があるかは、以下のURL参照
https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
※画像ファイルアップロードは、POSTしなくてもファイル選択した時点でサーバにアップロードされるので注意!!
エディタ上で、リサイズも出来たりして便利!

6, 同じファイル名をアップロードしても、ファイル名の末尾に連番をつけてくれてアップロードしてくれたけど、ファイル名から推測されたくない場合は暗号化も出来る。
WordPressと同様に、ファイル名をハッシュ値に変換する。実装済なので設定ファイルを変更するだけ
/public/js/tinymce/plugins/jbimages/config.php

7, HTMLタグを入力したい場合は、tinyMCEの適応を外す
a, ラジオボタンでモード選択
b, 切替ボタン
お好みで

コメントを残す

メールアドレスが公開されることはありません。