【結論】
・CKEditor4はCDN経由で読み込む事が可能
・デフォルトの設定であれば、JavaScriptのコードを一行記述するだけで、実装可能
・ツールバーのカスタマイズも、公式サイトでコードを自動生成してくれる
【目次】
- CKEditor4の導入方法とカスタマイズ方法について
- CDN経由で本体を読み込む
- CKEditorを画面に実装
- CKEditorのツールバーをカスタマイズ
- 参考情報
- 《今日の学習進捗(3年以内に10000時間に向けて)》
【本題】
CKEditor4の導入方法とカスタマイズ方法について
今回は、CKEditor4の導入方法と、カスタマイズ方法について説明します。
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時間!」