WYSIWYGエディタのCKEditor 4を設置、カスタマイズ、日本語化の方法を解説

2017/12/08 2019/02/24

WYSIWYGエディタのCKEditor 4

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」なので、これを使うかどうかは各自で判断していただくとして、使い方については下記に記事を書いています。
WYSIWYGエディタのCKEditor 5を設置、カスタマイズ、日本語化の方法を解説
　
CKEditor 5　オフィシャルサイト
https://ckeditor.com/ckeditor-5-builds/
　

WYSIWYGエディタのCKEditor4を設置する

WYSIWYGエディタのCKEditor4の標準的な設置方法

　
CKEditor4を設置する方法は非常に簡単です。
　
まず動くものを確認するためには、新しいファイルを作成し、下記のソースコードをコピペし、ブラウザで表示します。
　
これだけで動いている CKEditor4を確認することができるでしょう。
　

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="//cdn.ckeditor.com/4.7.3/standard/ckeditor.js"></script>
<!--
  <script src="//cdn.ckeditor.com/4.7.3/basic/ckeditor.js"></script>
  <script src="//cdn.ckeditor.com/4.7.3/standard/ckeditor.js"></script>
  <script src="//cdn.ckeditor.com/4.7.3/full/ckeditor.js"></script>
-->
</head>
<body>
<form action="" method="POST">
<textarea name="message" id="editor"></textarea>
</form>
<script>
  CKEDITOR.replace('editor', {
//    uiColor: '#EEEEEE',
//    width:800,
//    height: 200,
  });
</script>
</body>
</html>

<!doctype html>

<head>

<!--

-->

</head>

<body>

</form>

CKEDITOR.replace('editor', {

// uiColor: '#EEEEEE',

// width:800,

// height: 200,

});

</script>

</body>

</html>

WYSIWYGエディタのCKEditor4の設置方法の解説

CKEditor4のパッケージの指定

　
6行目で読み込んでいる「ckeditor.js」が、CKEditor4の本体のスクリプトです。
URLの途中に「standard」とありますが、CKEditor4にあらかじめ用意されているパッケージの指定部分です。
　
記事の最初にある画面が「Standard Package」の画面ですが、その他「Basic Package」「Full Package」があります。
　
8行目～10行目にある URLと差し替えることでそれぞれのパッケージに切り替えることができます。
　
　

CKEditor4のバージョンの指定

　
6行目で指定してある URLの中に「4.7.3」という数値がありますが、ここは CKEditor4のバージョンになっています。改めて言うほどのものでもないですが．．．
　
最新のバージョンは、下記のオフィシャルサイトを見ると最新のバージョンが分かります。
https://ckeditor.com/ckeditor-4/download/
　
「4.7.3」のまま使っても問題ないですが、最新版を調べて使うことをおススメします。
　
　

WYSIWYGエディタ「CKEditor4」を設置するテキストエリアに IDを指定

　
15行目にテキストエリアがありますが、ここに「id=”editor”」を指定します。
　
　

CKEditor4を実装するためのスクリプトを追記

　
17～23行目に記載してあるスクリプトが、CKEditor4を実装するために必要な記述です。
　
19～21行目は、コメントアウトしていますが、それぞれ背景色、横幅、縦の行数を指定する記述です。
最低限必要な記述としては以下になります。
　

<script>
  CKEDITOR.replace('editor', {
  });
</script>

CKEDITOR.replace('editor', {

});

</script>

　
これだけで、CKEditor4を実装することができます。
　
　
注意点としては、上記のスクリプトの記述を、入力エリアより後に記述する必要がある、という点です。
そのため、上記の記述は、「</body>」タグの直前に記述するといいでしょう。
　
　
また、ここで紹介したサンプルソースコードのベースは、下記のオフィシャルサイトにあります。
https://cdn.ckeditor.com/
　
　

CKEditor4を CakePHP3に導入する方法

　
CKEditor4を CakePHP3に導入する方法を下記の記事で解説をしています。
CakePHP3にWYSIWYGエディタのCKEditor4を設置、カスタマイズ方法を解説
　
静的な HTMLファイルに組み込む方法も CakePHP3に組み込む方法も基本的には同じですが、WYSIWYGエディタがある入力フォームページだけに「ckeditor.js」を読み込むブロック化という処理を利用するなど、CakePHP3の仕組みを利用した組み込み方法の解説をしています。
　
また、CakePHP3のブロック化については下記に記事を書いています。
CakePHP3のインストールでURL rewriting......のエラーが！その解決方法解説
　

WYSIWYGエディタのCKEditor4をカスタマイズする

　
単純に標準的な機能を設置するだけでよければ、前項で説明した内容の必要な記述を取り出して組み込むだけで OKです。
　
ですが、こうしたい、という具体的な要望がある場合は、カスタマイズすることも必要ですので、そのカスタマイズをするためのオプションをご紹介します。
　
　

CKEditor4のカスタマイズ方法の基本形

　
CKEditor4の基本的なカスタマイズは、先のサンプルにも書いていましたが、下記のスクリプトの中に条件を設定していきます。
　

<script>
  CKEDITOR.replace('editor', {
    uiColor: '#EEEEEE',
    width:800,
    height: 200,
  });
</script>

CKEDITOR.replace('editor', {

uiColor: '#EEEEEE',

width:800,

height: 200,

});

</script>

　
見たらなんとなくわかると思いますが、
「uiColor: ‘#EEEEEE’,」は、エディタのボタンがある箇所の背景の色を指定します。
「width:800,」は、横幅です。単位は「ピクセル」です。
「height: 200,」は、縦幅です。単位は同じく「ピクセル」です。
　
同じように、オプションの設定を追加していくことで多様なインターフェイスの CKEditor4を提供できます。
　
　
これ以降の説明では、オプションとして設定する箇所のみ記載していきます。
　
　

CKEditor4のカスタマイズ方法のオプション内容

表示の言語を指定する

　
CKEditor4は、サイトで使われている言語を自動的に判断し、その言語で画面を表示します。
ですが、特定の言語を指定したい場合もあると思いますが、その場合は、下記の様に「language:」で指定します。
　

    language: 'fr',

1	language: 'fr',

　
上記の例の「fr」は「フランス語」です。
「en」が「英語」で、「ja」が「日本語」で、「zh」が「中国語」で、「ko」が「韓国語」です。
「中国語（簡体字）」は「zh-CN」で、「中国語（繁体字）」は「zh-TW」です。
　
　

オリジナルの CSSを適用する

　
CKEditor4の部分のオリジナルの CSSを適用する場合は、下記の様に「contentsCss:」で指定します。
　

    language: 'fr',
    contentsCss: [
      "./css/example.css",
    ],

language: 'fr',

contentsCss: [

"./css/example.css",

ツールバー（ボタン）の位置を下に変更する

　
デフォルトの設定では、ツールバーは入力エリアの上にありますが、これを下にする場合は、下記のような指定を行います。
　

    toolbarLocation: 'bottom',

1	toolbarLocation: 'bottom',

　
デフォルトは「top」となっています。
　
　

表示するツールバーとその中のボタンを編集する・表示ボタンを指定編

　
「toolbar:」に続いて、でボタンを配列で指定することで、希望するボタンだけを配置することができます。
　

    toolbar: [
      ["Source"],                                    // ソースコード表示切り替え
      "/",                                           // 改行
      ["Link", "Image", "Table", "HorizontalRule"],  // リンク、画像配置、テーブル、水平線
      ["Bold", "Italic", "Strike", "RemoveFormat"],  // 太字、イタリック、打ち消し線、書式を解除
      ["Image", "-", "Styles", "Format"],            // イメージ、区切り線、スタイル、段落の書式
    ],

toolbar: [

["Source"], // ソースコード表示切り替え

"/", // 改行

["Link", "Image", "Table", "HorizontalRule"], // リンク、画像配置、テーブル、水平線

["Bold", "Italic", "Strike", "RemoveFormat"], // 太字、イタリック、打ち消し線、書式を解除

["Image", "-", "Styles", "Format"], // イメージ、区切り線、スタイル、段落の書式

　
配列ごとに区切って表示されます。
「”/”」を指定することで、そこで改行することができます。
配列内で「”-“」を指定することで、そこで区切り線を入れることができます。
　
ツールバーのボタンの名称については、下記のオフィシャルサイトに説明があります。
https://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_toolbar
　
　

表示するツールバーとその中のボタンを編集する・非表示ボタンを指定編

　
前項の指定方法は、ツールバーに表示するボタンを指定する、という方法でした。
この項では、あらかじめ表示されているツールボックスの中から非表示にするボタンを指定する、という指定方法です。
　

    removeButtons: 'Bold,Strike,Source,Format',

1	removeButtons: 'Bold,Strike,Source,Format',

　
「removeButtons:」に続いて項目を指定します。
複数ある場合は、上記の通り「,」で区切っていきます。
注意点としては「,」の後ろにスペースを入れると正しく処理されません。（スペースの後ろは認識されません。）
　
　

skin（テーマ、色）を変更する

　
CKEditor4のデフォルト設定の skin（テーマ、色）は、お世辞にも見やすいインターフェイスとは言い難いものがあります。
　
そのためなのか、オフィシャルサイトに見た目を変えるための skin（テーマ、色）が用意されています。
　
CKEditor4　skin
https://ckeditor.com/cke4/addons/skins/all
　
上記のページから、タイトルのリンクをクリックすると詳細ページに移動し、詳細ページにある「Download」ボタンから「skin」ファイル一式をダウンロードします。
　
ダウンロードしたファイルは展開し、適当な場所に設置します。
　
サンプルとして、「kama」という skinをダウンロードし、下記の場所に設置したとします。
　/documentroot/test/js/kama/
　
そして、これを CKEditor4に組み込むには他のオプションと同じように、下記のように、「skin:」に続いて、「skin名」＋「skinまでのパス」を「,（カンマ）」で区切って指定します。
　

<script>
  CKEDITOR.replace('editor', {
    skin: 'kama,/_test/js/kama/',
  });
</script>

CKEDITOR.replace('editor', {

skin: 'kama,/_test/js/kama/',

});

</script>

　
注意すべき点が 2つあります。
「skin名」と「skinまでのパス」をつなぐ「,（カンマ）」の後ろにスペースを入れてはいけません。動かなくなります。
また、「skinまでのパス」は、ドキュメントルートからのパスを指定します。相対パスでは動作しません。
　
　

ローカルの設定ファイルを利用する

　
この記事で紹介している CKEditor4の設置方法は、CDN（content delivery network）を利用した方法です。
そのため、オプションを利用したカスタマイズ方法は、先に説明したとおり、スクリプトの中に記述します。
　
そのオプションの指定方法で多くのカスタマイズを行うことができるようになっていますが、ここで解説できていない機能はたくさんあり、そのオプションの設定方法が「config.js」に記述します、となっている解説記事も多々あります。
　
ただ、「config.js」でオプション設定はどうやってやるの？という状況になりますので、ローカルに置いた「config.js」の設定内容を読み込む方法を解説します。
　
　
まず最初に「config.js」の中身のサンプルです。
　

CKEDITOR.editorConfig = function( config ) {
  config.language = 'fr';
  config.uiColor  = '#AADC6E';
};

CKEDITOR.editorConfig = function( config ) {

config.language = 'fr';

config.uiColor = '#AADC6E';

};

　
この「config.js」ファイルを作成し、適当な場所に設置します。
サンプルとして、下記に設置します。
　/documentroot/test/js/ckeditor/config.js
　
そして、これを読み込むには「customConfig:」に続いてファイルのパスをドキュメントルートからのパスを指定します。
　

<script>
  CKEDITOR.replace('editor', {
    customConfig: '/test/js/ckeditor/config.js',
  });
</script>

CKEDITOR.replace('editor', {

customConfig: '/test/js/ckeditor/config.js',

});

</script>

　
前項の skinと同じく、ドキュメントルートからのパスを「/」から記述します。
「config.js」が読み込めない場合はデフォルトの設定で処理されます。
　
また、「config.js」で設定した内容より、スクリプトの中に記述した内容の方が優先されますので、うまく反映されないときは設定が被っていないか、確認しましょう。
　
　

1つの画面に複数の CKEditor4を設置する

　
CKEditor4は、入力エリアに IDを指定して、それを WYSIWYGエディタに切り替える、という仕様になっています。
　
そのため、複数設置する場合は、まず、入力エリアに違う IDを設定します。
　

<textarea name="message" id="editor"></textarea>
<textarea name="message" id="editor2"></textarea>

1 2	<textarea name="message" id="editor"></textarea> <textarea name="message" id="editor2"></textarea>

　
続いて、CKEditor4を設置する記述を 2つに増やします。
そのうち、一つの「replace()」の「editor」と書かれている箇所を修正します。
　

<script>
  CKEDITOR.replace('editor', {
  });
</script>
　
<script>
  CKEDITOR.replace('editor2', {
  });
</script>

CKEDITOR.replace('editor', {

});

</script>

CKEDITOR.replace('editor2', {

});

</script>

　
また、2つに増やしますので、色や横幅などのオプションの設定はそれぞれで設定することができます。
　
　

WYSIWYGエディタの CKEditor4のまとめ

　
WYSIWYGエディタの CKEditor4について、導入方法から始まり、カスタマイズ方法まで解説を行いました。
　
ここで解説した内容は、CKEditor4の基本的な使い方の部分です。
　
オプションを利用してカスタマイズする方法や、独自のボタンを作る方法など、まだまだ多様な使い方が用意されています。
　
詳しくは、オフィシャルサイト「CKEditor 4 Documentation」を参照してください。
https://docs.ckeditor.com/ckeditor4/docs/
　
　
ちなみに、
また、「WYSIWYGエディタ」と同じくらい入力フォームに導入する場面があると思われるデイトピッカーの導入方法については下記に記事を書いていますので、あわせて参考にしてください。
CakePHP3にデイトピッカー jQuery UI DatePickerを実装する手順の解説
 CakePHP3でページごとに読み込むJavaScript、CSSを変える処理の解説
 jQuery UI DatePickerの導入の方法。および、カスタマイズ方法の解説
 jQuery UI DatePickerに時間を入力できる機能を追加する方法解説

- JavaScript

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

Message コメントをキャンセル

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

: WYSIWYGエディタのCKEditor 5を設置、カスタマイズ、日本語化の方法を解説

WYSIWYGエディタであるCKEditor5（旧：FCKeditor）を導入する方法を解説。ボタンの追加、削除などのカスタマイズ方法も解説。現時点ではDeveloper Previewのため、まだまだ情報は少ない。

: JavaScriptで「パスワードの生成」ボタンを追加する処理サンプル

WordPressのユーザ登録画面などで見かける「パスワードを生成」ボタン。ボタンをクリックするとパスワードが生成される機能をJavaScriptで実装するサンプルソースとその解説を公開。

: 初めて JavaScriptを勉強してみた

始めて JavaScriptを勉強してみたが、サーバサイドの言語とは実装の仕方が違うことが改めて理解できた。

: jQuery UI DatePickerの導入の方法。および、カスタマイズ方法の解説

デイトピッカー「jQuery UI DatePicker」を導入する方法を解説。テーマを変える、日本語にする、選択できる日を指定する、入力を制限するなどのオプションを使ったカスタマイズ方法も紹介。

: jQuery UI DatePickerに時間を入力できる機能を追加する方法解説

jQuery UI DatePickerには時間を入力する機能はないが、いくつかの JSファイルを追加し「datetimepicker」と書くだけで簡単に時間も入力できるようになる。その解説とカスタマイズ方法。