Pimcore TinyMCE プラグイン追加

tk-fuse · 2023 年 6 月 29 日午前 3:21

v11へのアップデートに伴い、デフォルトのエディターがCKEditorからTinyMCEへ変更。このエディターはPimcoreのバンドルとして webpack によりビルド・導入されているため、関連ファイルを変更後再ビルドする必要があります。再ビルド後 composer update コマンドでこのバンドルを更新します。

webpack

codesampleプラグイン

以下ソースのファイルを変更します。

TinymceBundle

codesampleをtoolbarとpluginsに追加。
menubar: trueに変更。

vendor/pimcore/pimcore/bundles/TinymceBundle/public/js/editor.js

        const toolbar2 = 'table | bullist numlist outdent indent | removeformat | code | codesample | help';
        let toolbar;
        if (e.detail.context === 'translation') {
            toolbar = {
                toolbar1: toolbar1,
                toolbar2: toolbar2
            };
        } else {
            toolbar = {
                toolbar1: `${toolbar1} | ${toolbar2}`
            };
        }

        let subSpace = '';
        if (e.detail.context === 'document') {
            subSpace = 'editables';
        } else if (e.detail.context === 'object') {
            subSpace = 'tags';
        }

        let defaultConfig = {};
        if('' !== subSpace && parent.pimcore[e.detail.context][subSpace]) {
            defaultConfig = parent.pimcore[e.detail.context][subSpace].wysiwyg ? parent.pimcore[e.detail.context][subSpace].wysiwyg.defaultEditorConfig : {};
        }

        tinymce.init(Object.assign({
            selector: `#${this.textareaId}`,
            height: 500,
            menubar: true,
            plugins: [
                'autolink', 'lists', 'link', 'image', 'code', 'codesample',
                'insertdatetime', 'media', 'table', 'help', 'wordcount'
            ],
            codesample_languages: [
                { text: 'HTML/XML', value: 'markup' },
                { text: 'BASH', value: 'bash' },
                { text: 'NGINX', value: 'nginx' },
                { text: 'INI', value: 'ini' },
                { text: 'SQL', value: 'sql' },
                { text: 'JavaScript', value: 'javascript' },
                { text: 'CSS', value: 'css' },
                { text: 'PHP', value: 'php' },
                { text: 'Docker', value: 'docker' },
                { text: 'Git', value: 'git' },
                { text: 'Ruby', value: 'ruby' },
                { text: 'Python', value: 'python' },
                { text: 'PowerShell', value: 'powershell' },
                { text: 'Java', value: 'java' },
                { text: 'C', value: 'c' },
                { text: 'C#', value: 'csharp' },
                { text: 'C++', value: 'cpp' }
            ],
.......
.......

追加項目
vendor/pimcore/pimcore/bundles/TinymceBundle/public/assets/tinymce.js

import 'tinymce/plugins/codesample';

注）追加項目（テキスト入力範囲のバグ。現状必要なし）
vendor/pimcore/pimcore/bundles/TinymceBundle/public/css/editor.css

/*.tox .tox-textarea {
    height: 500px;
} */

webpackはnpmのパッケージのためNode.js(npm)をインストールします。ビルド条件としてバージョン14以降が必要なため、バージョン指定してNode.jsをインストールできるnvmを利用します。

nvm

以下のスクリプトをダウンロード・実行することでnvmがインストールされます。
インストール後、新規に別ターミナルをオープンして下さい。

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

Node.jsバージョン16のインストール

$ nvm install 16

TinymceBundleのディレクトリに移動しwebpackをインストール

$ cd vendor/pimcore/pimcore/bundles/TinymceBundle
$ npm install webpack webpack-cli --save-dev

ビルド

$ npm run build

プロジェクトディレクトリに移動しcomposer updateコマンドを実行

$ cd project_directory
$ composer update

コードの表示は prism.js, prism.css を利用しているため Download ▲ Prism で両ファイルをダウンロードし、htmlファイルの<head>セクションでこれを指定します。

templates/layouts/layout.html.twig

.........
            {% do pimcore_head_link().appendStylesheet(asset('static/css/prism.css')) %}
...........
            {% do pimcore_head_script().appendFile(asset('static/js/prism.js')) %}
..............