CKEditor 4の初期設定ではテンプレートがカスタムしづらい
「CKEditor 4のテンプレート機能に、自作のテンプレートを追加したいけどできない…」
この記事をご覧のあなたは、こうお悩みではないでしょうか？
私も以前仕事で対応したことがあるのですが、
「設定方法に問題もなく、デベロッパーツールで確認してみてもテンプレートが追加されている。なのにいざ使おうとするとテンプレートが反映されていない…」
という事態に陥りました。
そしていろいろと調査して試行錯誤した結果、なんとか反映することができたのでその方法をまとめようと思います。
この記事では、CKEditor 4に自作テンプレートを追加する方法をお伝えします。
CKEDitor 4にテンプレートを追加できない方のお悩みを解消できるはずです！
ぜひご覧ください！
【基本コード】CKEditor 4にテンプレートを追加するために修正するファイル
ダウンロードしてきたCKEditor 4のファイル一式の中から、下記ファイルを編集します。
1. ckeditor/plugins/templates/templates/default.js
CKEDITOR.addTemplates("default", {
imagesPath: CKEDITOR.getUrl(CKEDITOR.plugins.getPath("templates") + "templates/images/"),
templates: [
{
title: "Image and Title",
image: "template1.gif",
description: "One main image with a title and text that surround the image.",
html: '\x3ch3\x3e\x3cimg src\x3d" " alt\x3d"" style\x3d"margin-right: 10px" height\x3d"100" width\x3d"100" align\x3d"left" /\x3eType the title here\x3c/h3\x3e\x3cp\x3eType the text here\x3c/p\x3e'
},
{
title: "Strange Template",
image: "template2.gif",
description: "A template that defines two columns, each one with a title, and some text.",
html: '\x3ctable cellspacing\x3d"0" cellpadding\x3d"0" style\x3d"width:100%" border\x3d"0"\x3e\x3ctr\x3e\x3ctd style\x3d"width:50%"\x3e\x3ch3\x3eTitle 1\x3c/h3\x3e\x3c/td\x3e\x3ctd\x3e\x3c/td\x3e\x3ctd style\x3d"width:50%"\x3e\x3ch3\x3eTitle 2\x3c/h3\x3e\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3eText 1\x3c/td\x3e\x3ctd\x3e\x3c/td\x3e\x3ctd\x3eText 2\x3c/td\x3e\x3c/tr\x3e\x3c/table\x3e\x3cp\x3eMore text goes here.\x3c/p\x3e'
},
{
title: "Text and Table", image: "template3.gif", description: "A title with some text and a table.",
html: '\x3cdiv style\x3d"width: 80%"\x3e\x3ch3\x3eTitle goes here\x3c/h3\x3e\x3ctable style\x3d"width:150px;float: right" cellspacing\x3d"0" cellpadding\x3d"0" border\x3d"1"\x3e\x3ccaption style\x3d"border:solid 1px black"\x3e\x3cstrong\x3eTable title\x3c/strong\x3e\x3c/caption\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3c/table\x3e\x3cp\x3eType the text here\x3c/p\x3e\x3c/div\x3e'
},
//ここから情報を追加していく
{
title: 'テンプレートのタイトル',
image: 'テンプレート選択画面の画像',
description: 'テンプレートの説明',
html: 'テンプレートのHTML'
},
]
});2. ckeditor/config.js
//初期設定を無効化
CKEDITOR.editorConfig = function( config ) {
config.allowedContent = true; //このコードを追加する
};CKEditor 4にテンプレートを追加するポイント
- 公式サイトからファイルをダウンロードして組み込む必要がある
（CDN経由ではテンプレートの追加ができない） - 初期設定を解除する必要がある
以上のポイントを押さえて、今から説明する作業を進めてください！
CKEditor 4にテンプレートを追加するための事前準備
1. CKEditor 4 をダウンロードする
CKEditor 4のダウンロードは下記リンクからお願いします。
https://ckeditor.com/ckeditor-4/download/
2. CKEditorを表示する場所をHTMLで作成する
HTML
<!-- CKEditorに置きかわる要素を用意する -->
<textarea id="editor"></textarea>
<!--
ダウンロードしてきたファイルの中からckeditor.jsを読み込む。
パスは任意で変更してください。
-->
<script src="ckeditor/ckeditor.js"></script>- 任意のHTMLファイルに
textareaタグを用意して、editorというidを指定する - ダウンロードしてきた「cieditor.js」を読み込む
JavaScript
//CKEditorに置きかわる要素に指定したID名を設定する
CKEDITOR.replace('editor');こちらのJavaScriptファイルはCKEditorの設定用に作成してください。
JavaScriptファイルを作成せずに、HTMLファイルに記述しても問題ありません。
ファイル名も任意で結構です。
以上で設定は完了です。
これだけの工程で、CKEditorを表示することができます！
お伝えした手順通りに作業を進めてみてください。
【解説】CKEditor 4にテンプレートを追加する方法
ckeditor/plugins/templates/templates/default.jsを修正する
自作のテンプレートを追加するには、以下のファイルにコードを記述していきます。
ckeditor/plugins/templates/templates/default.js
ファイルの中身はこのようになっています。
CKEDITOR.addTemplates("default", {
imagesPath: CKEDITOR.getUrl(CKEDITOR.plugins.getPath("templates") + "templates/images/"),
templates: [
{
title: "Image and Title",
image: "template1.gif",
description: "One main image with a title and text that surround the image.",
html: '\x3ch3\x3e\x3cimg src\x3d" " alt\x3d"" style\x3d"margin-right: 10px" height\x3d"100" width\x3d"100" align\x3d"left" /\x3eType the title here\x3c/h3\x3e\x3cp\x3eType the text here\x3c/p\x3e'
},
{
title: "Strange Template",
image: "template2.gif",
description: "A template that defines two columns, each one with a title, and some text.",
html: '\x3ctable cellspacing\x3d"0" cellpadding\x3d"0" style\x3d"width:100%" border\x3d"0"\x3e\x3ctr\x3e\x3ctd style\x3d"width:50%"\x3e\x3ch3\x3eTitle 1\x3c/h3\x3e\x3c/td\x3e\x3ctd\x3e\x3c/td\x3e\x3ctd style\x3d"width:50%"\x3e\x3ch3\x3eTitle 2\x3c/h3\x3e\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3eText 1\x3c/td\x3e\x3ctd\x3e\x3c/td\x3e\x3ctd\x3eText 2\x3c/td\x3e\x3c/tr\x3e\x3c/table\x3e\x3cp\x3eMore text goes here.\x3c/p\x3e'
},
{
title: "Text and Table", image: "template3.gif", description: "A title with some text and a table.",
html: '\x3cdiv style\x3d"width: 80%"\x3e\x3ch3\x3eTitle goes here\x3c/h3\x3e\x3ctable style\x3d"width:150px;float: right" cellspacing\x3d"0" cellpadding\x3d"0" border\x3d"1"\x3e\x3ccaption style\x3d"border:solid 1px black"\x3e\x3cstrong\x3eTable title\x3c/strong\x3e\x3c/caption\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3c/table\x3e\x3cp\x3eType the text here\x3c/p\x3e\x3c/div\x3e'
}
]
});
すでにtemplatesプロパティに3つの情報が登録されていますが、これらはデフォルトのテンプレートの情報です。
そのまま残しておいて問題ありません。
4つ目以降に自作テンプレートの情報をコードにして追加していきます。
CKEDITOR.addTemplates("default", {
imagesPath: CKEDITOR.getUrl(CKEDITOR.plugins.getPath("templates") + "templates/images/"),
templates: [
{
title: "Image and Title",
image: "template1.gif",
description: "One main image with a title and text that surround the image.",
html: '\x3ch3\x3e\x3cimg src\x3d" " alt\x3d"" style\x3d"margin-right: 10px" height\x3d"100" width\x3d"100" align\x3d"left" /\x3eType the title here\x3c/h3\x3e\x3cp\x3eType the text here\x3c/p\x3e'
},
{
title: "Strange Template",
image: "template2.gif",
description: "A template that defines two columns, each one with a title, and some text.",
html: '\x3ctable cellspacing\x3d"0" cellpadding\x3d"0" style\x3d"width:100%" border\x3d"0"\x3e\x3ctr\x3e\x3ctd style\x3d"width:50%"\x3e\x3ch3\x3eTitle 1\x3c/h3\x3e\x3c/td\x3e\x3ctd\x3e\x3c/td\x3e\x3ctd style\x3d"width:50%"\x3e\x3ch3\x3eTitle 2\x3c/h3\x3e\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3eText 1\x3c/td\x3e\x3ctd\x3e\x3c/td\x3e\x3ctd\x3eText 2\x3c/td\x3e\x3c/tr\x3e\x3c/table\x3e\x3cp\x3eMore text goes here.\x3c/p\x3e'
},
{
title: "Text and Table", image: "template3.gif", description: "A title with some text and a table.",
html: '\x3cdiv style\x3d"width: 80%"\x3e\x3ch3\x3eTitle goes here\x3c/h3\x3e\x3ctable style\x3d"width:150px;float: right" cellspacing\x3d"0" cellpadding\x3d"0" border\x3d"1"\x3e\x3ccaption style\x3d"border:solid 1px black"\x3e\x3cstrong\x3eTable title\x3c/strong\x3e\x3c/caption\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3c/table\x3e\x3cp\x3eType the text here\x3c/p\x3e\x3c/div\x3e'
},
//ここから情報を追加していく
{
title: 'テンプレートのタイトル',
image: 'テンプレート選択画面の画像',
description: 'テンプレートの説明',
html: 'テンプレートのHTML'
},
]
});このような感じですね。
もう少しイメージがつきやすいように、仮のコードを入力したものを用意しました。
CKEDITOR.addTemplates("default", {
imagesPath: CKEDITOR.getUrl(CKEDITOR.plugins.getPath("templates") + "templates/images/"),
templates: [
{
title: "Image and Title",
image: "template1.gif",
description: "One main image with a title and text that surround the image.",
html: '\x3ch3\x3e\x3cimg src\x3d" " alt\x3d"" style\x3d"margin-right: 10px" height\x3d"100" width\x3d"100" align\x3d"left" /\x3eType the title here\x3c/h3\x3e\x3cp\x3eType the text here\x3c/p\x3e'
},
{
title: "Strange Template",
image: "template2.gif",
description: "A template that defines two columns, each one with a title, and some text.",
html: '\x3ctable cellspacing\x3d"0" cellpadding\x3d"0" style\x3d"width:100%" border\x3d"0"\x3e\x3ctr\x3e\x3ctd style\x3d"width:50%"\x3e\x3ch3\x3eTitle 1\x3c/h3\x3e\x3c/td\x3e\x3ctd\x3e\x3c/td\x3e\x3ctd style\x3d"width:50%"\x3e\x3ch3\x3eTitle 2\x3c/h3\x3e\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3eText 1\x3c/td\x3e\x3ctd\x3e\x3c/td\x3e\x3ctd\x3eText 2\x3c/td\x3e\x3c/tr\x3e\x3c/table\x3e\x3cp\x3eMore text goes here.\x3c/p\x3e'
},
{
title: "Text and Table", image: "template3.gif", description: "A title with some text and a table.",
html: '\x3cdiv style\x3d"width: 80%"\x3e\x3ch3\x3eTitle goes here\x3c/h3\x3e\x3ctable style\x3d"width:150px;float: right" cellspacing\x3d"0" cellpadding\x3d"0" border\x3d"1"\x3e\x3ccaption style\x3d"border:solid 1px black"\x3e\x3cstrong\x3eTable title\x3c/strong\x3e\x3c/caption\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3c/table\x3e\x3cp\x3eType the text here\x3c/p\x3e\x3c/div\x3e'
},
{
title: 'テキストの回り込み',
image: 'template1.gif',
description: 'テキストを回り込ませたいときに使います。',
html: '<div class="floating-box">' +
'<img src="https://●●●●/assets/img/float-img.jpg">' +
'テキストを回り込ませたいときに使います。テキストを回り込ませたいときに使います。<br>' +
'テキストを回り込ませたいときに使います。<br>' +
'テキストを回り込ませたいときに使います。テキストを回り込ませたいときに使います。' +
'</div>'
}
]
});それぞれのプロパティに記述する内容は以下の表でご確認ください。
| title | テンプレートのタイトル |
| image | テンプレートのサムネイル画像のパス （なければデフォルトで入っている「template1.gif」をしていしておけばOK） |
| description | テンプレートの説明文 |
| html | テンプレート部分のHTMLコード |
以上でテンプレートの追加は完了です。
どのファイルを修正するのかさえわかってしまえば、追加方法は簡単ですね！
CKEditor 4のテンプレートをカスタマイズするため初期設定を解除する
CKEditorの初期設定で許可されていない属性やタグは自動でエスケープ（削除）されてしまいます。
なので柔軟にテンプレートをカスタマイズするには、この初期設定を解除しておく必要があります。
私が経験した例はこんな感じ。
class属性が削除されるfigureタグがpタグに置きかわるstyle属性に設定したプロパティのうち、いくつかが削除される
例）class属性が消える
CKEDITOR.addTemplates("default", {
templates: [
{
title: 'h3',
image: 'template1.gif',
description: 'h3タグ。小見出しに使用します。',
html: '<h3 class="title-03">小見出しに使用します。</h3>' //h3タグにクラスを指定しているのに…
}
]
});<!-- 出力結果 -->
<h3>小見出しに使用します。</h3>「default.js」に記載していたclass属性が削除されてしまいました。
これでは指定していたCSSが反映されません。
なぜこんな不具合が起こるのかと調査したところ、初期設定が影響しているようです。
というわけで、初期設定を解除します。
解除する方法は簡単！
ckeditor/config.jsに以下の一文を追加するだけです。
CKEDITOR.editorConfig = function( config ) {
config.allowedContent = true; //このコードを追加する
};これですべてのタグや属性が許可されるようになりました。
こちらも修正するファイルさえわかっていれば簡単に対応できますね。
以上でテンプレートのカスタマイズに必要は設定は完了です！
CKEditor 4にテンプレートを追加する際の注意点
こちらではテンプレートを追加する際の注意点をお伝えします。
自作のHTMLやJavaScriptファイルにテンプレートを追加するコードを書いても反映されない
自作のHTMLファイルやJavaScriptファイルにコードを記述しても、テンプレートが反映されません。
テンプレートを反映するには「ckeditor/plugins/templates/templates/default.js」を修正するひつようがあるからです。
しかし調査をしていると、いくつかの参考記事を発見することができました。
概ねの内容は、
「JavaScriptファイルを作成して、その中に下記のとおり記述すると自作テンプレートを追加できる」
といったものです。
CKEDITOR.addTemplates("default", {
imagesPath: CKEDITOR.getUrl(CKEDITOR.plugins.getPath("templates") + "templates/images/"),
templates: [
{
title: 'テンプレートのタイトル',
image: 'テンプレート選択画面の画像',
description: 'テンプレートの説明',
html: 'テンプレートのHTML'
},
]
});しかし、この方法を試してみたところテンプレートが反映されなかったのです。
試行錯誤しましたが、自作のJavaScriptファイルに正しい記述をしても想定通りの結果は得られませんでした。
なのでCKEditor 4にテンプレートを追加するには、「ckeditor/plugins/templates/templates/default.js」を修正しましょう。
CDN経由ではテンプレートのカスタマイズができない
CDN経由でCKEditorを読み込んでも、テンプレートは追加できません。
なぜなら、CDNで読み込む方法では対象のファイルをさわることができないからです。
CKEditorを使用するには2つの方法があります。
- 公式サイトからファイルをダウンロードして組み込む
- CDNで必要なファイルを読み込む
ここまで説明してきたとおり、テンプレートをカスタマイズするにはダウンロードしてきたファイルを修正する必要があります。
しかしCDNを利用する方法は、CKEditorのファイル一式をダウンロードしない方法となります。
そのため、テンプレートを追加するためのファイルを修正できないのです。
テンプレートを追加するのであれば、CDNは利用できません。
逆にいうと、デフォルトのまま使用するならCDNで読み込むほうがラクですね。
<!-- 標準的な機能のみ使用する場合 -->
<script src="//cdn.ckeditor.com/4.16.0/standard/ckeditor.js"></script>
<!-- 機能てんこもりトッピング全部のせ -->
<script src="//cdn.ckeditor.com/4.16.0/full/ckeditor.js"></script>ということで、
「カスタマイズするならファイル一式ダウンロードする」
これがテンプレートを追加する際の注意点となります。
【まとめ】CKEditor 4にテンプレートを追加しよう
CKEditor 4に自作テンプレートを追加する方法についてまとめてみました。
- ファイル一式をダウンロードしてきて、テンプレート設定ファイルを編集する
- 初期設定を解除する
これらのポイントを押さえておけば簡単にテンプレートを追加して、カスタムできます。
以上です！
少しでもお役に立てたら嬉しいです。
参考サイト
- CKEditorの「テンプレート」を増やすことはできますか
https://joruri-cms.jp/2017/faq/2018080100044/ - カスタマイズCKEditorの一つのアプローチ
https://qiita.com/DinhDuyThanh/items/d1558113fd00965820d2
Comments