記事ブロック（CKEditor）のテンプレート機能を利用する

投稿日：2018/09/20

記事ブロックのスタイルをカスタマイズする覚書で記事ブロックのことをいろいろ調べていたら、どうやらver8からの記事ブロックCKEditorではテンプレート機能というものがありそこからよく使うデザインをセットしておけるそうなのでちょっと試してみるメモ。

GitHubからサンプルをダウンロードする

GitHub 上のapp.phpファイル 2〜23行目を追加する。

※jsフォルダなどがない場合は作成する。
GitHubのjsフォルダ以下ごっそりコピペしました。

/application/js/ckeditor4/vendor/plugins/templates/templates/default.js
ここにテンプレートをいろいろセットできる。
- title
- image
- description
- HTML
が必要。

「管理画面」 - 「システムと設定」 - 「基本」 - 「記事ブロックエディター設定」

templatesにチェックをいれる。

こういうエディタだったのが、

こう！！！（テンプレート用のアイコンが増えました）

たぶん3つのサンプルが表示されるはずなんだけど画面は真っ白。

エラーを見るとdefault.jsのパスがうまく読みにいけていない（404）のがわかった。

plugin.js内の下記コードが原因

CKEDITOR.config.templates_files = [
    CKEDITOR.getUrl( '/application/js/ckeditor4/vendor/plugins/templates/templates/default.js' )
];

ここを

CKEDITOR.config.templates_files = [
    CKEDITOR.getUrl( CCM_REL + '/application/js/ckeditor4/vendor/plugins/templates/templates/default.js' )
];

フルパスで読みこませたところうまくいきました。

あとはデモを参考にいろいろカスタマイズするだけですね！