エス技研

WordPress、CakePHP、PHP、baserCMSなどの Web系システムを中心に情報を提供します!


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

      2018/03/03

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

 

CKEditorとは?

 
CKEditorとは、Webサイトの入力エリアを WYSIWYG形式のエディタにするツールです。
 
01_CakePHP3にWYSIWYGエディタのCKEditor4を設置、カスタマイズ方法を解説
 
オープンソースの 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を設置するサンプルソース

 

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

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

 
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を指定します。
 

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

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

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

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

 
ない場合は、上記のソースコードを「<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」です。
 

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

CakePHP3の関連記事

CakePHP3の1対多での連携を中間テーブルを使った多対多の連携に変更するときの手順
CakePHP3でデフォルトのソート条件を設定してユーザの選択肢たソート条件を有効にする方法
CakePHP3で Ajaxを使う方法の解説。3.6以降対応。Successとthenの両方を解説。
CakePHP3でパンくずの指定は HTMLヘルパーを使って指定する方法を解説
CakePHP3にOGPをfetch、asignを利用してテンプレートごとに指定する方法を解説
CakePHP3のOGPはHTMLヘルパーの$this->Html->meta()を使って設定
CakePHP3でkeywords、DescriptionをHTMLヘルパーを使って設定する
CakePHP3で環境変数を設定して本番環境と開発環境を分けて処理をする場合
CakePHP3でCookieを保存、呼び出し、削除の操作・CakePHP3.7対応
CakePHP3でアソシエーション先のカラムでデータをソートして取得したい
 
その他の「CakePHP3」に関する記事一覧
 
 

 - CakePHP 2.x 3.x

GoogleAdwords

GoogleAdwords

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

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

下記の空欄を埋めてください。 * Time limit is exhausted. Please reload CAPTCHA.

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

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

  関連記事

CakePHP3でファイルのアップロード処理を自作・解説付き・その1
CakePHP3でファイルのアップロード処理を自作・解説付き・その1

CakePHP3でファイルをアップロードする処理を、php.netにある「エラーを起こさない」と説明がある処理を参考に作成。サンプルソースとその解説付きで、コピペでも動くし、カスタマイズも簡単!

CakePHP3のインストールでURL rewriting......のエラーが!その解決方法解説
CakePHP3のインストールでURL rewriting……のエラーが!その解決方法解説

CakePHP3をインストールしたら URL rewriting is not properly configured.のエラーが。原因は.htaccessが有効になっていないこと。httpd.confに設定を追加すればOK。

VirtualBoxにCakePHP3を設置。必要なCentOS、Apache、PHP、MySQL、Composerをインストールし設定する。
VirtualBoxにCakePHP3を設置。必要なCentOS、Apache、PHP、MySQL、Composerをインストールし設定する

VirtualBoxにCentOS、Apache、MySQL、PHPをインストールするところから初めてCakePHP3の開発環境を構築する手順を詳細解説。この記事1つで全ての設定が完了する。

CakePHP3でDocumentRootやtmp、webroot、logsなどのフォルダへのパスの定数
CakePHP3でDocumentRootやtmp、webroot、logsなどのフォルダへのパスの定数

CakePHP3で特定フォルダのパスの定数を解説。root、DocumentRoot、app、config、webroot、tests、tmp、cache、vendor、コア、コアの srcが設定済み。realpath()関数を使うと柔軟なパス指定が可能。

CakePHP3のfriendsofcake/searchでツリーカテゴリーの子階層も含めて検索する方法
CakePHP3のfriendsofcake/searchでツリーカテゴリーの子階層も含めて検索する方法

CakePHP3のツリービヘイビアを使ったツリーカテゴリーの子階層も含めての検索を検索プラグイン「friendsofcake/search」を使って実現する方法を解説しました。

CakePHP3でcomposerを利用してライブラリ・プラグインをインストールする方法

CakePHP3でcomposerを使ってパッケージ(ライブラリ、プラグイン)をインストールする方法の解説。PHPを使うのはCakePHP3が初めてというような方への使い方から解説。

CakePHP3のメール送信の処理・テンプレート使用・添付ファイル送信も解説
CakePHP3のメール送信の処理・テンプレート使用・添付ファイル送信も解説

CakePHP3からメールを送信する方法解説。基本的な記述方法を基にして、テンプレートを使う方法、ファイルを添付する方法へと拡張しながら解説。

CakePHP3のアソシエーションでJOINのタイプのLEFT、INNERを切り替えながら使う方法
CakePHP3のアソシエーションでJOINのタイプのLEFT、INNERを切り替えながら使う方法

CakePHP3でテーブルのアソシエーションしたデータの取得をコントローラー側でINNERかLEFTを指定する方法を解説。TableファイルにINNERで指定していてもController側で変更ができる。

CakePHP3でアソシエーション先のカラムでデータをソートして取得したい
CakePHP3でアソシエーション先のカラムでデータをソートして取得したい

アソシエーション先のテーブルのカラムをキーにソートをしたデータを取得したい!ときの記述方法を解説。「orderAsc()」ではなく「contain()」の中にSort条件を記述する。

CakePHP3でページごとに読み込むJavaScript、CSSを変える処理の解説
CakePHP3でページごとに読み込むJavaScript、CSSを変える処理の解説

CakePHP3でJavaScriptやCSSを編集する基本形から、それらやテンプレート(エレメント)を特定のテンプレートを読み込んだときのみ編集、実行するための方法、ブロック化について解説。