【結論】
・CKEditorとは、
WYSIWYGエディタの一種
・WYSIWYGエディタは
ユーザーにリッチな編集画面を
提供する為のインターフェイス
・CKEditorは、WYSIWYGエディタの中でも古株で
シンプルな構造から、多く利用されている。
【目次】
【本題】
CKEditorについて
CKEditorとは、WYSIWYGエディタの一種です。
WYSIWYGエディタは
ユーザーにリッチな編集画面を
提供する為のインターフェイスです。
WYSIWYGエディタは、いくつか出回っていますが、
その中でもCKEditorは、軽量で導入が比較的簡単なことから
古くから利用され続けています。
導入方法
CKEditorはgemも出回っているそうですが、
そちらはCarrierWaveしか対応していないのと、
CKEditorバージョン4系しか使えませんでした。
今回、画像アップロードは、shrineを利用したかったので、
gemではなく、npmを使って、CKEditorを導入しました。
ちなみに、CKEditorをCDNで読み込む際は、下記のように
「javascript_include_tag」を使う方法もあります。
<%= javascript_include_tag 'https://cdn.ckeditor.com/ckeditor5/11.2.0/classic/ckeditor.js' %>
http://railsdoc.com/references/javascript_include_tag
実装例
はてなブログなどをされている方であれば馴染み深いと思いますが、
この様に文字のサイズなどを編集できて、
その結果をそのまま見れるという特徴があります
なお、HTML形式でデータベースには保存されます。
<p>はい、いいえ</p> <h1>はい、いいえ</h1> <ul><li>はい</li> <li>いいえ</li></ul> <ol><li>はい</li> <li>いいえ</li></ol> <figure class="image"> <img src="/uploads/image/95/image/standard-61e2ee8deba069f05095e2ba4faf583f.png"> </figure>
《今日の学習進捗（3年以内に10000時間に向けて）》
・他のプロジェクトのコードを参考にして、CKEditorの導入を試みて、 一旦一通りの動作が出来るところまで完成した。 しかし、コードをそのまま利用した為、かなりブラックボックスが多く、 エラーが発生した際、対処に苦慮する場面が散見された。 想定より工数に余裕がある為、明日は公式のリファレンスを 読み込んで、仕様を把握した上で、要件の仕様に沿う様に 修正を加えていきたい。
学習開始からの期間 ：138日
今日までの合計時間：1323h
一日あたりの平均学習時間：9.6h
今日までに到達すべき目標時間：1260h
目標との解離：63h
「10,000時間」まで、
残り・・・「8677時間！」