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

admin

8年前

参考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

// ブラウザで直接アクセスする時のpublicフォルダ以下を指定する。
// どこからでも使えるようにするには、フルパス(http://localhost/images/editor/)で書いた方が早い。最後のスラッシュを忘れずに！
$config['img_path'] = 'images/editor';

// Webドキュメント直下にデプロイしていない場合(リンク)は、絶対パスで指定する。
//$config['upload_path'] = $_SERVER['DOCUMENT_ROOT'] . $config['img_path']; // Physical path. [Usually works fine like this]
$config['upload_path'] = '/どこかのフォルダ/ララベルのプロジェクトルート/public/images/editor';

// ブラウザで直接アクセスする時のpublicフォルダ以下を指定する。

// どこからでも使えるようにするには、フルパス(http://localhost/images/editor/)で書いた方が早い。最後のスラッシュを忘れずに！

$config['img_path'] = 'images/editor';

// Webドキュメント直下にデプロイしていない場合(リンク)は、絶対パスで指定する。

//$config['upload_path'] = $_SERVER['DOCUMENT_ROOT'] . $config['img_path']; // Physical path. [Usually works fine like this]

$config['upload_path'] = '/どこかのフォルダ/ララベルのプロジェクトルート/public/images/editor';

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="js/tinymce/tinymce.min.js"></script>
    <script>
    // リッチエディタの設定(post的には、ただのtextareaと同様。HTMLタグ付きなだけ)        
    tinymce.init({
        selector: "#foo", // 指定の要素に、TinyMCEを適用
        plugins  : 'jbimages link autolink preview textcolor image autoresize', // 指定しないと、ツールバーに表示されないものもある
        
        // 文字操作のツールバー。どんな種類があるかは、以下のURL参照
        // https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
        // 戻る 進む | フォーマット | 太字 斜体 | 左寄せ 中央寄せ 右寄せ 均等割付 | 箇条書き 段落番号 文字サイズ 文字色 画像 リンク 画像アップロード　プレビュー
        toolbar: "undo redo | formatselect | bold italic forecolor fontsizeselect | alignleft aligncenter alignright alignjustify |  link jbimages | preview",        
        
        menubar  : false,   // メニューバー(ツールバーと重複する内容なので、表示しない)
        relative_urls : false,  // 画像やリンクのパスが相対パスに変換されるのを防ぐ
        convert_urls: false,  // 画像やリンクのパスが相対パスに変換されるのを防ぐ(両方falseにしないと絶対パスにならない)

        language : 'ja',    // 日本語化
        width: 1000,        // 幅(px)
        height: 600,        // 高さ(px)
        statusbar: true,   // ステータスバーの表示・非表示(サイズ変更も含む)

        //入力時に改行が<p>にならないように
        force_br_newlines : true,
        force_p_newlines : false,
        forced_root_block : 'div',　// 標準だとpタグ。''だと文字修正を入れるためのstyle="text-align:..."が入らなくなるのでdivタグにしておく
    });
    </script>
</head>
<body>
    <div><button onclick="tinymce.execCommand('mceToggleEditor',false,'foo');">書式設定切替</button></div>
    <textarea id="foo" name="foo"></textarea>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

// リッチエディタの設定(post的には、ただのtextareaと同様。HTMLタグ付きなだけ)

tinymce.init({

selector: "#foo", // 指定の要素に、TinyMCEを適用

plugins : 'jbimages link autolink preview textcolor image autoresize', // 指定しないと、ツールバーに表示されないものもある

// 文字操作のツールバー。どんな種類があるかは、以下のURL参照

// https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols

// 戻る進む | フォーマット | 太字斜体 | 左寄せ中央寄せ右寄せ均等割付 | 箇条書き段落番号文字サイズ文字色画像リンク画像アップロード　プレビュー

menubar : false, // メニューバー(ツールバーと重複する内容なので、表示しない)

relative_urls : false, // 画像やリンクのパスが相対パスに変換されるのを防ぐ

convert_urls: false, // 画像やリンクのパスが相対パスに変換されるのを防ぐ(両方falseにしないと絶対パスにならない)

language : 'ja', // 日本語化

width: 1000, // 幅(px)

height: 600, // 高さ(px)

statusbar: true, // ステータスバーの表示・非表示(サイズ変更も含む)

//入力時に改行が<p>にならないように

force_br_newlines : true,

force_p_newlines : false,

forced_root_block : 'div',　// 標準だとpタグ。''だと文字修正を入れるためのstyle="text-align:..."が入らなくなるのでdivタグにしておく

});

</script>

</head>

<body>

<div><button onclick="tinymce.execCommand('mceToggleEditor',false,'foo');">書式設定切替</button></div>

</body>

</html>

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

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

#$config['encrypt_name'] = FALSE;
$config['encrypt_name'] = TRUE;

1 2	#$config['encrypt_name'] = FALSE; $config['encrypt_name'] = TRUE;

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

<div><button onclick="tinymce.execCommand('mceToggleEditor',false,'foo');">書式設定切替</button></div>

<input type="radio" name="name" value="val1" onChange="tinymce.execCommand('mceToggleEditor',false,'foo')"  checked>リッチ
<input type="radio" name="name" value="val2" onChange="tinymce.execCommand('mceToggleEditor',false,'foo')">テキスト

<div><button onclick="tinymce.execCommand('mceToggleEditor',false,'foo');">書式設定切替</button></div>

<input type="radio" name="name" value="val1" onChange="tinymce.execCommand('mceToggleEditor',false,'foo')" checked>リッチ

<input type="radio" name="name" value="val2" onChange="tinymce.execCommand('mceToggleEditor',false,'foo')">テキスト

関連記事