CKEditor4の導入とカスタマイズ方法

【結論】

・CKEditor4はCDN経由で読み込む事が可能

・デフォルトの設定であれば、JavaScriptのコードを一行記述するだけで、実装可能

・ツールバーのカスタマイズも、公式サイトでコードを自動生成してくれる

【目次】

【本題】

CKEditor4の導入方法とカスタマイズ方法について

今回は、CKEditor4の導入方法と、カスタマイズ方法について説明します。

ryoutaku-jo.hatenablog.com

CDN経由で本体を読み込む

今回は、CDN経由でCKEditorを読み込みます。 下記のリンクから、CDNのアドレスは取得できます。

https://ckeditor.com/ckeditor-4/download/

<script src="//cdn.ckeditor.com/4.11.4/full/ckeditor.js"></script>

こちらをCKEditorを読み込みたいページに埋め込みます。

CKEditorを画面に実装

次に、CKEditorを画面に表示させます。 まず、CKEditorで編集したい項目にidを指定します。 今回はeditorとしていますが、任意で構わないです。

<%= form_with(model: post, local: true) do |f| %>
（省略）
  <%= f.text_area :content, class: 'form-control', id: 'editor' %>
（省略）

次に、下記のjavascriptを埋め込みます。 先ほど指定したidを記述して、どの項目にCKEditorを反映させるか指定します。

CKEDITOR.replace( 'editor' );

これでビューへの反映が完了します。

CKEditorのツールバーをカスタマイズ

最後にツールバーをカスタマイズします。 下記のToolbar Configuratorを利用すれば、自身の選択したツールバーの内容に応じて、自動でコードを生成してくれます。

https://ckeditor.com/latest/samples/toolbarconfigurator/index.html#basic

今回は、下記の様にカスタマイズしました。

CKEDITOR.replace( 'editor', {
  //ツールバーグループのカスタマイズ
  toolbarGroups: [
    { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
    { name: 'links', groups: [ 'links' ] },
    { name: 'insert', groups: [ 'insert' ] },
    '/',
    { name: 'styles', groups: [ 'styles' ] },
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
    { name: 'colors', groups: [ 'colors' ] },
    { name: 'tools', groups: [ 'tools' ] },
    { name: 'others', groups: [ 'others' ] },
    { name: 'about', groups: [ 'about' ] },
    { name: 'document', groups: [ 'mode', 'document', 'doctools' ] }
  ],
  //不要なボタンを削除
  removeButtons: 'Source,Save,NewPage,Print,Templates,' +
    'Find,Replace,SelectAll,Scayt,Cut,Styles,Font,' +
    'Copy,Paste,PasteText,PasteFromWord,BidiLtr,Smiley,' +
    'BidiRtl,Language,Unlink,Anchor,Flash,Outdent,Indent,' +
    'PageBreak,CreateDiv,RemoveFormat,CopyFormatting,' +
    'Superscript,Subscript,Strike,Form,Checkbox,Radio,TextField,' +
    'Textarea,Select,Button,ImageButton,HiddenField,ShowBlocks,About,SpecialChar',
});

これでツールバーのカスタマイズも完了です。

参考情報

・CKEditor4公式ページ
https://ckeditor.com/ckeditor-4/

・設定オプションの記述方法 https://ckeditor.com/docs/ckeditor4/latest/guide/dev_configuration.html

・設定オプションの一覧 https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html

・Toolbar Configurator（ツールバーのオプションを生成するフォーム） https://ckeditor.com/latest/samples/toolbarconfigurator/#basic

・Toolbar Configuratorの使用方法 https://ckeditor.com/docs/ckeditor4/latest/guide/dev_toolbar.html

・ツールバーグループの設定方法 https://ckeditor.com/docs/ckeditor4/latest/guide/dev_toolbarconcepts.html#toolbar-groups-configuration

《今日の学習進捗（3年以内に10000時間に向けて）》

・CKEditor4の導入にて、Qiitaなど日本語ページにカスタマイズ方法が載っていないので、英語の公式ドキュメントを参考に進めたが、かなり時間を要してしまった。 公式ドキュメントは、英語なのと、情報が網羅的過ぎることもあり、必要な情報に辿り着くのを困難にしている。 また、CKEditor自体が、JavaScriptで開発されているが、JavaScriptの知識が不足していることも、時間を掛ける要因になった。 公式度キュエントを読むこと自体は慣れも必要だと感じるが、英語・JavaScriptに関しては、どこかで時間を取って学習したい。

学習開始からの期間 ：154日
今日までの合計時間：1508h
一日あたりの平均学習時間：9.8h
今日までに到達すべき目標時間：1406h
目標との解離：102h
「10,000時間」まで、

残り・・・「8492時間！」