エス技研

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


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

   

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にWYSIWYGエディタのCKEditor4を設置、カスタマイズ方法を解説
CakePHP3でページごとに読み込むJavaScript、CSSを変える処理の解説
CakePHP3にデイトピッカー jQuery UI DatePickerを実装する手順の解説
CakePHP3の更新画面でUpload Plugin 3.0を使う方法、viewで使う方法解説・その3
CakePHP3のUpload Plugin 3.0をバリデーションなど実運用向けのカスタマイズ方法解説・その2
CakePHP3の画像、ファイルアップロードプラグインUpload Plugin 3.0の設置解説・その1
CakePHP3でユーザ定義の定数、変数を設定し、読み込む方法解説
CakePHP3のバージョンを指定してインストールする詳細な手順を解説
CakePHP3のタイムゾーンを協定世界時UTCから日本標準時間JSTにずれを変更する方法
CakePHP3チュートリアルで日付と時刻のDateTimeでエラーが出たときの対処方法
 
その他の「CakePHP3」に関する記事一覧
 
 

 - CakePHP 2.x 3.x

GoogleAdwords

GoogleAdwords

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

Message

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

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

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

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

  関連記事

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

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

CakePHP3の更新画面でUpload Plugin 3.0を使う方法、viewで使う方法解説・その3
CakePHP3の更新画面でUpload Plugin 3.0を使う方法、viewで使う方法解説・その3

CakePHP3でファイル、画像をアップロードするプラグイン、upload plugin 3を導入する手順を解説した記事。3部作のその3で記事を更新する際のファイルの取り回しなどについてを解説。

CakePHP3のユーザ管理・認証プラグイン CakeDC/Usersの導入・機能解説・3.1.5対応
CakePHP3のユーザ管理・認証プラグイン CakeDC/Usersの導入・機能解説・3.1.5対応

CakePHP3のユーザ管理プラグイン Usersは、ユーザ登録、メール認証、ログイン認証、ユーザ管理、権限管理、reCAPTCHAなど会員制のサイトを簡単に実現可能。その導入方法、カスタマイズ方法を解説。

CakePHP 2.3 Search Pluginで検索処理 その4前方一致検索、後方一致検索、不等号による検索、between句による範囲検索

CakePHPの検索プラグイン Search Pluginの検索処理の中で前方一致検索、後方一致検索、不等号による検索、between句による範囲検索の解説です。

CakePHP3のCakeDC/Usersのバリデーションのカスタマイズ方法解説
CakePHP3のCakeDC/Usersのバリデーションのカスタマイズ方法解説

CakeDC謹製Usersプラグインの紹介。Usersのカスタマイズとして入力項目のバリデーションの変更を、プラグインのファイルは触らずオーバーライドにより実装する方法を解説する。

CakePHP 2.3 ログイン、操作履歴、アクセスログ出力

CakePHPでログインや操作履歴などのアクセスログ出力処理を作成します。

CakePHP3のUpload Plugin 3.0をバリデーションなど実運用向けのカスタマイズ方法解説・その2
CakePHP3のUpload Plugin 3.0をバリデーションなど実運用向けのカスタマイズ方法解説・その2

CakePHP3でファイル、画像をアップロードするプラグイン、upload plugin 3を導入する手順を解説した記事。3部作のその2でバリデーションなどの実用的なカスタマイズ方法を解説。

CakePHP 2.3 Model、Controllerの見たい変数の中身をログ出力

CakePHPの Modelや Controllerの変数の中身をログとして出力して見る方法を提供します。

CakePHP 2.3でOn Duplicate Key構文を実装

CakePHPで On Duplicate Key構文を Queryを利用して実装する方法をサンプルソース付きで解説します。

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

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