CKEditor に Content Templates プラグインを追加する

concrete5 バージョン8以降で採用されている CKEditor にプラグインを追加する方法です。
よく使われる Content Templates プラグインで解説します。

プラグインをダウンロードする

CKEditor のプラグインは、CKEditor の公式サイトで検索することができます。フリーのプラグインはその場でダウンロードも可能です。

Content Templates プラグインのダウンロード

ダウンロードする際は、バージョンに注意してください。concrete5 が同梱している CKEditor のバージョンは CHANGES.md で確認できます。バージョン8.4.3現在、同梱されている CKEditor のバージョンは 4.10.1 です。プラグインも CKEditor 本体のバージョンに合わせたバージョンをダウンロードしてください。

まだ、ダウンロード画面に Add-on dependencies（依存アドオン）が表示されます。Content Templates プラグインの場合は、Dialog と表示されます。これは、Dialog プラグインに依存するということです。Dialog プラグインはコアに同梱されていますが、同梱されていなかった場合、そのプラグインもインストールする必要があります。コアに同梱されている CKEditor プラグインは、plugins フォルダで確認できます。

プラグインを配置する

ダウンロードしたzipファイルを解凍し、application/js/ckeditor4/vendor/plugins ディレクトリにアップロードします。

Custom Templates プラグインの場合は、application/js/ckeditor4/vendor/plugins/templates になります。

CKEditor にプラグインを登録する

アップロードしたプラグインのディレクトリに、register.js というファイルを作成します。

Custom Templates プラグインの場合は、application/js/ckeditor4/vendor/plugins/templates/register.js になります。

内容はこのようになります。


if (typeof CKEDITOR !== 'undefined') {
    CKEDITOR.plugins.addExternal(
        'templates',
        CCM_REL + '/application/js/ckeditor4/vendor/plugins/templates/'
    );
}

この Javascript で、CKEditor に application/js/ckeditor4/vendor/plugins/templates/ ディレクトリ内のファイルを認識させます。

concrete5 に CKEditor プラグインを登録する

application/bootstrap/app.php に下記のコードを追加します。


if ($this->app->isInstalled()) {
    $assetList = Concrete\Core\Asset\AssetList::getInstance(); // アセットリストの取得
    $assetList->register( // アセットの登録
        'javascript', // アセットタイプ。javascript を指定
        'editor/ckeditor4/templates', // アセットハンドル。任意指定
        'js/ckeditor4/vendor/plugins/templates/register.js' // 追加した register.js の位置を application/ を省いて登録
    );

    $editor = $this->app->make('editor');
    $pluginManager = $editor->getPluginManager();
    try {
        $plugin = new Concrete\Core\Editor\Plugin();
        $plugin->setKey('templates'); // プラグインのキー
        $plugin->setName(t('Templates')); // プラグイン名
        $plugin->requireAsset('javascript', 'editor/ckeditor4/templates'); // 上記で登録したアセットハンドルを指定する。
        $pluginManager->register($plugin);
    } catch (Exception $e) {
    }
}

記事ブロックエディター設定でプラグインを有効にする

ここまでで concrete5 と CKEditor の両方にプラグインが登録されましたので、最後に［管理画面＞システムと設定＞基本＞記事ブロックエディター］ページで登録したプラグインを有効にすれば、利用することができます。

Custom Templates プラグインのみ：テンプレートファイルの登録と変更

このプラグインは、テンプレートから選んだコンテンツを素早くエディタに呼び出せるプラグインです。テンプレートは Javascript で記載します。どのように記述するかは、application/js/ckeditor4/vendor/plugins/templates/templates/default.js を参考にしてください。コピーして改変するのが楽でしょう。

次に、作成したテンプレートファイルが読み込まれるよう、設定ファイルを少し変更します。

application/config/site.php に設定を追加します。

 


<?php

return [
    'sites' => [
        'default' => [
            'editor' => [
                'ckeditor4' => [
                    'custom_config_options' => [
                        'templates_files' => [
                            DIR_REL . '/application/js/template.js' // 作成したテンプレートファイルの位置に書き換える
                        ],
                    ],
                ],
            ],
        ],
    ],
];

template-plugin.png

以上