EC-CUBE4で商品登録画面等にあるテキストエリアにTinyMCEを利用して入力させる方法

EC-CUBE Advent Calendar 2021 20日目の記事です。

EC-CUBE4の管理画面では商品登録画面での商品説明やフリーエリアなどは、HTMLタグなど自由に入力可能となっているのですが、HTMLタグを知らない方や苦手な方にとっては、記入し辛くなっています。

WordPressのようなリッチエディタを使って記入したいという方に今回はその方法を説明します。

リッチエディタを実現するために色々なライブラリが存在していますが、今回はTinyMCEを利用します。

www.tiny.cloud

利用方法ですが、CDNではなくダウンロードをして導入する方法とします。

ダウンロード画面より、「Self-hosted Releases」を選択して、「Download TinyMCE Community」をダウンロードします。

www.tiny.cloud

TinyMCEの導入

ダウンロードしたファイルを解凍後、「tinymce」→「js」ディレクトリ直下にある「tinymce」ディレクトリ毎、html/template/admin/assets/js/vendor直下に配置します。

日本語を利用したい方は、

www.tiny.cloud

より「Japanese」をダウンロード後、解答したja.jsファイルを、html/template/admin/assets/js/vendor/tinymce/langsへコピーしてください。

配置後、src/Eccube/Resource/template/admin/Product/product.twigファイルをapp/template/admin/Product/product.twigへコピーします。ディレクトリがなければ作成してください。

商品管理画面の修正

product.twigファイルに対して、ダウンロードしたTinyMCEファイルを読み込ませます。{% block javascript %}内に、以下の内容を記入してください。記入する箇所は、

<script src="{{ asset('assets/js/vendor/fileupload/jquery.fileupload-validate.js', 'admin') }}"></script>

の次の行で問題ありません。

<script src="{{ asset('assets/js/vendor/tinymce/tinymce.min.js', 'admin') }}"></script>

次に、<script> </script>内に対して、TinyMCEの内容を記述します。今回は各オプションの説明は行いませんが、以下の内容を記述してください。

tinymce.init({
    selector: 'textarea',
    language: 'ja',
    height: 300,
    // 改行時にbrタグを適用させたくない場合、forced_root_blockをコメントアウトすること
    forced_root_block: false,
    paste_as_text: true,
    paste_data_images: true,
    image_advtab: true,
    relative_urls: false,
    setup: function(editor) {
        editor.on('init', function(e) {
            this.getDoc().body.style.fontSize = '16px';
            this.getDoc().body.style.lineHeight = '1.2';
        });
    },
    plugins: [
        'advlist autolink lists link image charmap print preview anchor',
        'searchreplace visualblocks code fullscreen',
        'insertdatetime media table contextmenu paste imagetools'
    ],
    toolbar: 'insertfile undo redo | styleselect fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image paste code'
})

上記の内容だけでリッチエディタが利用可能となります。実際に入力してみてフロント画面へ反映されているか確認してみてください。

画像ファイルをアップロードしたい方は下記のURLを参照すれば実装可能です。

www.tiny.cloud

また、Youtubeの埋め込み動画などもプラグインとして探せばあると思います。

他のリッチエディタを利用したい方も手順は同じなので、今回の記事を参考にしてみてください。