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

2017/12/09 2019/02/24

WYSIWYGエディタのCKEditor 5

CKEditorとは？

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

　
オープンソースで軽量、かつ、導入の手間が非常に簡単な WYSIWYGエディタで、最古参のエディタの一つです。
かつては「FCKeditor」と称していましたが、バージョン 3になるときに「CKEditor」に改称しました。
現在の最新版として「CKEditor 5」がリリースされています。
　
CKEditor 5　オフィシャルサイト
https://ckeditor.com/ckeditor-5-builds/
　
CKEditor 5 Developer Preview
https://ckeditor5.github.io/
　
　
ただ、最新版の「CKEditor 5」は、2017年11月14日に「Developer Preview」として「v1.0.0-alpha.2」がリリースされたばかりですので、もうしばらく様子見するのであれば、下記に「CKEditor 4」の導入、カスタマイズの記事を書いていますので、そちらを参考にしていただきつつ、「CKEditor 4」をじっくり掘り下げていただく方がいいのではないか、と思います。
WYSIWYGエディタのCKEditor 4を設置、カスタマイズ、日本語化の方法を解説
　
WYSIWYGエディタは、各社からいろいろなものが提供されていますので、いろいろと触ってみるのもいいですが、一つのものを選んでじっくり深く掘り下げていく方が多様な使い方に対応できると思います。
そのじっくり掘り下げるエディタとして「CKEditor」は、有効な選択肢としておススメできます。
　
　
ちなみに、「CKEditor4」を CakePHP3に導入する方法の記事、および、CakePHP3に導入する際に利用するブロック化という処理についての解説は下記にあります。
WYSIWYGエディタのCKEditor 4を設置、カスタマイズ、日本語化の方法を解説
 CakePHP3でページごとに読み込むJavaScript、CSSを変える処理の解説
　

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

WYSIWYGエディタのCKEditor5の標準的な設置方法・ClassicEditor

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

<!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/ckeditor5/1.0.0-alpha.2/classic/ckeditor.js"></script>
</head>
<body>
<form action="" method="POST">
<textarea name="message" id="editor"></textarea>
</form>
<script>
ClassicEditor
  .create( document.querySelector( '#editor' ) )
  .catch( error => {
    console.error( error );
  } );
</script>
</body>
</html>

<!doctype html>

<head>

</head>

<body>

</form>

ClassicEditor

.create( document.querySelector( '#editor' ) )

.catch( error => {

console.error( error );

} );

</script>

</body>

</html>

　
これは、ClassicEditorというバージョンで、これまでの「CKEditor 4」のインターフェイスを引き継いだバージョンです。
　
　
ちなみに、ここで解説しているソースコードは、下記のオフィシャルサイトにあるものとほとんど同じです。
https://docs.ckeditor.com/ckeditor5/latest/builds/guides/quick-start.html
　
　

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

CKEditor5のパッケージの指定

　
6行目で読み込んでいる「ckeditor.js」が、CKEditor5の本体のスクリプトです。
URLの途中に「classic」とありますが、用意されている CKEditor5の種類の指定部分です。
　
選択できる種類は「Classic editor」「Inline editor」「Balloon editor」があります。
　
　

CKEditor5のバージョンの指定

　
6行目で指定してある URLの中に「1.0.0-alpha.2」という値がありますが、ここは CKEditor5のバージョンになっています。改めて言うほどのものでもないですが．．．
　
最新のバージョンは、下記の Githubを見るとよさそうです。
https://ckeditor5.github.io/
　
　

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

　
10行目が入力エリアとなる部分です。IDに「editor」を指定します。
　
「Classic editor」では、「textarea」でも動作しますが、「Inline editor」「Balloon editor」は「textarea」では正常に動作しないようです。
　
　

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

　
12～18行目に記載してあるスクリプトが、CKEditor5を実装するために必要な記述です。
　
13行目の「ClassicEditor」の部分が、指定するエディタによって変わります。
　
これだけで、CKEditor5を実装することができます。
　
　
注意点としては、上記のスクリプトの記述を、入力エリアより後に記述する必要がある、という点です。
そのため、上記の記述は、「</body>」タグの直前に記述するといいでしょう。
　

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

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

「Inline editor」「Balloon editor」を設置する

　
カスタマイズ方法を紹介する前に、先に紹介した「Classic editor」以外に CKEditor5では「Inline editor」「Balloon editor」という種類のエディタも用意されています。
　
まずは、「Inline editor」「Balloon editor」の導入方法を解説します。
　
　

「Balloon editor」を設置する

　
「Balloon editor」を設置するためのソースコードは以下のようになります。
　

<!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/ckeditor5/1.0.0-alpha.2/balloon/ckeditor.js"></script>
</head>
<body>
<form action="" method="POST">
<div id="editor">
  <p>This is some sample content.</p>
</div>
</form>
<script>
BalloonEditor
  .create( document.querySelector( '#editor' ) )
  .catch( error => {
    console.error( error );
  } );
</script>
</body>
</html>

<!doctype html>

<head>

</head>

<body>

<p>This is some sample content.</p>

</div>

</form>

BalloonEditor

.create( document.querySelector( '#editor' ) )

.catch( error => {

console.error( error );

} );

</script>

</body>

</html>

　
「Classic editor」から変わる点は、6行目、15行目の「balloon」と、10～12行目の入力エリアの部分です。
　
10～12行目の入力エリアは、「Inline editor」「Balloon editor」では、「textarea」では正常に動作しないようです。
　
　

「Inline editor」を設置する

　
「Inline editor」を設置するためのソースコードは以下のようになります。
変更箇所、注意点は「Balloon editor」と同じです。
　

<!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/ckeditor5/1.0.0-alpha.2/inline/ckeditor.js"></script>
</head>
<body>
<form action="" method="POST">
<div id="editor">
  <p>This is some sample content.</p>
</div>
</form>
<script>
InlineEditor
  .create( document.querySelector( '#editor' ) )
  .catch( error => {
    console.error( error );
  } );
</script>
</body>
</html>

<!doctype html>

<head>

</head>

<body>

<p>This is some sample content.</p>

</div>

</form>

InlineEditor

.create( document.querySelector( '#editor' ) )

.catch( error => {

console.error( error );

} );

</script>

</body>

</html>

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

　
CKEditor5をカスタマイズする場合は、下記の通り「create()」メソッドにオプションの内容を記述します。
　

<script>
ClassicEditor
  .create( document.querySelector( '#editor' ), {
    toolbar: [ 'headings', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
    heading: {
      options: [
        { modelElement: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
        { modelElement: 'heading1', viewElement: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
        { modelElement: 'heading2', viewElement: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
      ]
    }
  } )
  .catch( error => {
    console.error( error );
  } );
</script>

ClassicEditor

.create( document.querySelector( '#editor' ), {

toolbar: [ 'headings', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],

heading: {

options: [

{ modelElement: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },

{ modelElement: 'heading1', viewElement: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },

{ modelElement: 'heading2', viewElement: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }

]

}

} )

.catch( error => {

console.error( error );

} );

</script>

　
上記は、ツールバーに表示されるボタンと、ツールバーに表示される「headings（見出し）」のプルダウンの中身を指定しています。
　
このような形でオプションを指定していきます。
オプションの指定の仕方は、「Inline editor」「Balloon editor」も同じです。
　
　

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

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

　
前項の基本編で解説したのは、ツールバーに表示するボタンを指定する、という方法でした。
この項では、あらかじめ表示されているツールボックスの中から非表示にするボタンを指定する、という指定方法です。
　
「toolbar」の代わりに「removePlugins」で指定します。
指定する項目は、配列で指定します。
　

    removePlugins: [ 'Heading', 'Link' ],

1	removePlugins: [ 'Heading', 'Link' ],

WYSIWYGエディタの CKEditor5のまとめ

　
WYSIWYGエディタの CKEditor5について、導入方法、および、基本的なカスタマイズ方法について解説しました。
　
ですが、現時点（2017年12月時点）では「Developer Preview 」として提供されている「v1.0.0-alpha.2」がリリースされたばかりですので、実際の案件に利用するには「CKEditor 4」を利用し、しっかりカスタマイズをした方がいいだろうと思います。
　
「CKEditor5」については、正式リリースが行われたころに改めて記事を書きたいと思います。
　
　
ちなみに、
また、「WYSIWYGエディタ」と同じくらい入力フォームに導入する場面があると思われるデイトピッカーの導入方法については下記に記事を書いていますので、あわせて参考にしてください。
CakePHP3にデイトピッカー jQuery UI DatePickerを実装する手順の解説
 CakePHP3でページごとに読み込むJavaScript、CSSを変える処理の解説
 jQuery UI DatePickerの導入の方法。および、カスタマイズ方法の解説
 jQuery UI DatePickerに時間を入力できる機能を追加する方法解説

- JavaScript

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

Message コメントをキャンセル

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

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

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

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

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

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

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

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

WYSIWYGエディタであるCKEditor（旧：FCKeditor）を導入する方法を解説。日本語化やボタンの追加削除、skinの変更、複数エディタの設置など実際の使い方に合わせたカスタマイズ方法も解説。