CakePHP3にWYSIWYGエディタのCKEditor4を設置、カスタマイズ方法を解説

2017/12/10 2018/03/03

CakePHP3にWYSIWYGエディタのCKEditor4を設置

CKEditorとは？

　
CKEditorとは、Webサイトの入力エリアを WYSIWYG形式のエディタにするツールです。
　

　
オープンソースの WYSIWYG形式のエディタで、軽量、かつ、導入の手間が非常に簡単で、最古参のエディタの一つです。
かつては「FCKeditor」と称していましたが、バージョン 3になるときに「CKEditor」に改称しました。
　
　
WYSIWYGエディタは、いろいろなものが提供されていますので、いろいろ触って試してみるのもいいと思いますが、一つのものを選んでじっくり深く掘り下げていく方が結果的に多様なニーズを満たす対応ができるのではないか、と感じています。
　
そして、その深く掘り下げていく WYSIWYGエディタとして「CKEditor 4」は有効な選択肢になると感じています。
　
CKEditor 4　オフィシャルサイト
https://ckeditor.com/ckeditor-4/
　
　
ちなみに、2017年11月14日に最新版の「CKEditor 5　v1.0.0-alpha.2」がリリースされています。
しかし、「Developer Preview」の「v1.0.0-alpha.2」なので、実務でこれを使うという選択肢はなかなかとりえないと思います。
　
CKEditor 5　オフィシャルサイト
https://ckeditor.com/ckeditor-5-builds/
　
　

CKEditor4、CKEditor5の基本的な設置方法、カスタマイズ方法

　
この記事では、CKEditor4を CakePHP3に導入する解説記事です。
　
CKEditor4、CKEditor5の基本的な導入方法と、カスタマイズ方法については下記に記事を書いていますので、そちらを参考にしてください。
WYSIWYGエディタのCKEditor 4を設置、カスタマイズ、日本語化の方法を解説
 WYSIWYGエディタのCKEditor 5を設置、カスタマイズ、日本語化の方法を解説
　
　

CakePHP3に WYSIWYGエディタの CKEditor4を設置するサンプルソース

１．add.ctp、edit.ctpに CKEditor4を読み込む情報を記述

　
まず、CKEditor4を読み込む情報を記述します。
CKEditor4は、CDN（content delivery network）にあるスクリプトを読み込みますので、ファイルのダウンロードなどは必要ありません。
　
記述する対象ファイルは、以下です。
　/src/Template/Topics/add.ctp
　/src/Template/Topics/edit.ctp
　

<?= $this->Html->script('//cdn.ckeditor.com/4.7.3/standard/ckeditor.js',['block' => true]) ?>

<?= $this->start('ckeditor') ?>
<script>
  CKEDITOR.replace('editor', {
  });
</script>
<?= $this->end() ?>

<?= $this->Html->script('//cdn.ckeditor.com/4.7.3/standard/ckeditor.js',['block' => true]) ?>

<?= $this->start('ckeditor') ?>

CKEDITOR.replace('editor', {

});

</script>

<?= $this->end() ?>

　
1行目の記述で CKEditor4の本体のスクリプトを読み込みます。
URL中の「4.7.3」はバージョンですので、バージョンアップがあった場合はそのバージョンに合わせてください。
　
「standard」は CKEditor4のタイプで、その他「Basic Package」「Full Package」があります。
　
詳しくは下記を参照してください。
WYSIWYGエディタのCKEditor 4を設置、カスタマイズ、日本語化の方法を解説
　
CKEditor4　ダウンロードページ
https://ckeditor.com/ckeditor-4/download/
　
　
また、組み込みを行った CKEditor4の WYSIWYGエディタをどの項目に設定するか、を指定するために、該当項目に「,”id”=>”editor”」を追加し、IDを指定します。
　

echo $this->Form->control('body',["type"=>"textarea","cols"=>10,"rows"=>2,"label"=>"本文","id"=>"editor"]);

1	echo $this->Form->control('body',["type"=>"textarea","cols"=>10,"rows"=>2,"label"=>"本文","id"=>"editor"]);

　
　
CakePHP3の FormHelperについては「CakePHP3のForm Helperの使い方のまとめ」に記事を書いていますので合わせて参考にしてください。
　
　

２．default.ctpにスクリプトを読み込む情報を記述

　
続いて、add.ctp、edit.ctpに記述した JavaScriptを HTMLに編集するための処理を記述します。
　
記述する対象ファイルは、以下です。
　/src/Template/Layout/default.ctp
　
追記する内容は、以下の通りです。
　

<?= $this->fetch('ckeditor') ?>

1	<?= $this->fetch('ckeditor') ?>

　
このスクリプトは、CKEditor4を設置する入力エリアよりも後に記述する必要があります。
そのため、「</body>」の直前に記述することが一般的です。
（表示スピードを高速化するため、スクリプトを最後に記述するという意味合いもあります。）
　
　
CakePHP3のデフォルトのテンプレートを使っている場合は、これだけで CKEditor4の WYSIWYGエディタが表示されると思います
ですが、オリジナルのテンプレートを作っている場合は、「default.ctp」に下記の記述があるかどうかを確認してください。
　

<?= $this->fetch('script') ?>

1	<?= $this->fetch('script') ?>

　
ない場合は、上記のソースコードを「<head>～</head>」の間に追記してください。
　
　

CakePHP3に CKEditor4を読み込む処理の解説

　
CKEditor4の本体の読み込みや、JavaScriptの処理の記述を、「default.ctp」にではなく、「add.ctp」「edit.ctp」に記述しています。
　
これは、CakePHP3のブロック化という処理を利用しています。
　
ブロック化を利用することにより、表示する画面ごとに必要な JavaScriptをそれぞれに読み込むことができるため、処理を軽くすることができます。
　
また、CSSを振り分けることもできるようになります。
　
CakePHP3のブロック化については下記に記事を書きましたので参考にしてください。
CakePHP3でページごとに読み込むJavaScript、CSSを変える処理の解説
　
　
あわあせて、下記の記事で、ブロック化を利用した DatePicker、TimePickerの導入方法を書いていますので、あわせて参考にしてみてください。
CakePHP3にデイトピッカー jQuery UI DatePickerを実装する手順の解説
 jQuery UI DatePickerに時間を入力できる機能を追加する方法解説
　
　

CKEditor4のカスタマイズ方法

　
CKEditor4は、非常に多機能で、様々なカスタマイズをするためのオプションが用意されています。
　
オプションの設定を記述するファイルは、「add.ctp」「edit.ctp」です。
　

<?= $this->start('ckeditor') ?>
<script>
  CKEDITOR.replace('editor', {
    uiColor: '#EEEEEE',
    width:800,
    height: 200,
  });
</script>
<?= $this->end() ?>

<?= $this->start('ckeditor') ?>

CKEDITOR.replace('editor', {

uiColor: '#EEEEEE',

width:800,

height: 200,

});

</script>

<?= $this->end() ?>

　
上記の 4～6行目のように、オプションの設定を記述していきます。
　
上記の例は、
「uiColor: ‘#EEEEEE’,」は、エディタのボタンがある箇所の背景の色を指定します。
「width:800,」は、横幅です。単位は「ピクセル」です。
「height: 200,」は、縦幅です。単位は同じく「ピクセル」です。
　
その他の多様なオプションに関しては、下記に解説を書いていますので、あわせて参考にしてください。
WYSIWYGエディタのCKEditor 4を設置、カスタマイズ、日本語化の方法を解説
　
　

- CakePHP 3.x 4.x CakePHP3

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです！

Message コメントをキャンセル

※入力いただいたコメントは管理者の承認後に掲載されます。

: CakePHP3で Ajaxを使う方法の解説。3.6以降対応。Successとthenの両方を解説。

CakePHP3でajaxを利用する処理の実装方法を解説。プルダウンを変更するとデータベースの値を取得し検索結果の内容を変更するというような処理を想定。CakePHP3.6以降の CSRF対策対応済。

: CakePHP3の1対多での連携を中間テーブルを使った多対多の連携に変更するときの手順

CakePHP3で「1対多」の連携を中間テーブルを利用した「多対多」の連携に変更するときの手順のまとめ。中間テーブルの設定やModelの変更などを間違いやすい箇所を指摘しながらの解説。

: CakePHP 2.3　Search Pluginで検索処理　その２表示件数を動的に変える方法

CakePHPの検索プラグイン Search Pluginの検索処理の中で動的に表示件数を変える方法です。

: CakePHP 2.3　ID以外のカラムでアソシエーション（連携）をさせる場合

ID以外のカラムでアソシエーション（連携）させるための考え方とサンプルソースを用いての説明を行っています。

: Windows環境の XAMPPを利用して CakePHPの開発する際の注意点

WindowsベースにXAMPPで環境を構築しCakePHP4を利用したWebシステムを構築する際は、大文字と小文字の違いを意識する必要がある。LinuxベースのWebサーバに移動させたときに不具合で動作しないこともある。

: CakePHP3のOGPはHTMLヘルパーの$this->Html->meta()を使って設定

CakePHP3でOGPを設定する方法を解説。metaタグを編集するHTMLヘルパーを利用してOGPのタグを編集する。また、エレメントとして分割することでメンテナンス性も向上させる。

: CakePHPのバリデーションを入力値・項目の条件によって変える方法を解説

入力された値によってバリデーション（入力チェック）の内容を切り替える。その処理をCakePHPで実装する方法を解説。条件ごとに unset関数を使ってバリデーションを削除する、という方法を採る。

: CakePHP 2.3で PDFを作成する方法を調査「mpdf」「TCPDF」「FPDF」

CakePHPで PDFを編集、出力するには「mpdf」「TCPDF」「FPDF」といったプラグインがあり、使い勝手を比較検討しました。TCPDFが一番良さそうでした。

: CakePHP4のFrozenDateで1ヵ月前、先月、今月1日、来月末の日付などを算出する方法

CakePHPには「FrozenDate」の日付を扱う関数が用意されている。これを利用して、1ヶ月後、月末日、月初日、5日後などを指定して日付を取得できる。それを解説。

: CakePHP3のHtmlHelperのLink設定のまとめ。mailto、URL、Root／Homeのリンクなども

CakePHP3でHtmlHelperを使ってリンクの設定をする方法のまとめ。基本形からURLを指定、class、id、targetを指定、mailtoのリンク、画像をアンカーに、JavaScriptのダイアログなどの解説。