concrete5 v8.xでCKEditorのPluginを導入する

嶽内の森

2017-01-23

旧日記

旧ブログ

前略

鴉河雛です

というわけで、このサイトも無事？concrete5 v8.0.3へアップデートしまして、

CKEditorが標準で使えるようになったわけですが、

以前の記事でCKEditorのPlugin導入方法等を説明しましたが、今回はちょっと違うやり方となっていたので

(実質同じだが紹介した方法ではできない)

合わせて説明します。

※公式なやり方がわからなかったのでやったらできたよというやり方です

※この記事の内容を行い何らかの損害が発生しても当方では責任は負いませんご了承ください

と、私のようなよくわからない人間は無駄にcodesnippetを使いたがるのでそれの導入を例としてやっていきます。

流れとしてはPluginをconcrete5のパッケージとしてインストールするという形です

まず、通常通りPluginをDLしてきます。

次に、ここを参考にパッケージを作成します。

この時点で上記URLを参考にできる方はこれ以降は見なくても問題なしです。

(このサイトは私と同じく初心者の方に向けて行っています)

まず、パッケージを作るためのファイルを用意します。

例としてこんな感じです。

┗ckep_register　(名前は例です)
　┣assets
　┃┗codesnippet　(DLしたPluginをそのまま突っ込む)
　┃　　┣register.js　(自分で用意)
　┃　　┗plugin.js
　┣controller.php　(自分で用意)
　┗icon.webp　(自分で用意)

ではまずregister.jsを作成します。

中身は以下な感じです。

if (typeof CKEDITOR !== 'undefined') {
    CKEDITOR.plugins.addExternal('codesnippet', CCM_REL + '/packages/ckep_register/assets/codesnippet/');
}

キモは2行目で、codesnippetの部分を導入するPlugin名に、

/packages～～の部分を導入したPluginのパスにします。

では次に、controller.phpを用意していきます。

基本的にはDocsに記載されている内容と一緒です。

registerPlugin();
    }

    protected function registerPlugin()
    {        
        $assetList = \AssetList::getInstance();
        $assetList->register(
            'javascript',
            'editor/ckeditor/codesnippet',　　　//codesnippetの部分はPlugin名に
            'assets/codesnippet/register.js',　//register.jsのパス
            array(),
            $this->pkgHandle
        );

        $assetList->registerGroup(
            'editor/ckeditor/codesnippet',　　//codesnippetの部分はPlugin名に
            array(
                array('javascript', 'editor/ckeditor/codesnippet')　//codesnippetの部分はPlugin名に
            )
        );

        $plugin = new Plugin();
        $plugin->setKey('codesnippet');　　　　//codesnippetの部分はPlugin名に
        $plugin->setName(t('codesnippet'));　//codesnippetの部分はPlugin名に
        $plugin->requireAsset('editor/ckeditor/codesnippet'); 　//codesnippetの部分はPlugin名に
        Core::make('editor')->getPluginManager()->register($plugin);
    }
}

と、こんな感じです。

‘editor/ckeditor/codesnippet’　となっているところは赤文字の部分を導入するPluginへ変更です。

完成したら、普段通り、packagesフォルダに配置してダッシュボードのconcrete5を拡張の機能追加からインストールします。

インストールが完了したら、記事ブロックエディター設定から対象のPluginを有効にして完了です！

ちなみに、今回導入したcodesnippetですが、トラッキングコードから以下を読み込むように変更する必要があります。

/codesnippet/lib/highlight/styles/default.css　※もしくは好きなテーマ

/codesnippet/lib/highlight/highlight.pack.js

/codesnippet/lib/highlight/init_highlight.js

init_highlight.jsは以下のように記載します。

(codesnippetブロックを参考)

$(document).ready(function() {
  $('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});

これで、設定は完了です！

CKEditorは色々Pluginもあり使いやすいエディタなので非常にありがたいですが、

Pluginの導入方法がいまいちわからないので初心者にもわかりやすく展開してくれればなぁとか思います・・

では今日はここまで！

うじゃ