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

【結論】

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

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

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

【目次】

CKEditor4の導入方法とカスタマイズ方法について
CDN経由で本体を読み込む
CKEditorを画面に実装
CKEditorのツールバーをカスタマイズ
参考情報

【本題】

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

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

ryoutaku-jo.hatenablog.com

CDN経由で本体を読み込む

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

CKEditor 4 - Download Latest Version

<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',
});