CKEditorについて

【結論】

・CKEditorとは、
 WYSIWYGエディタの一種

WYSIWYGエディタは
 ユーザーにリッチな編集画面を
 提供する為のインターフェイス

・CKEditorは、WYSIWYGエディタの中でも古株で
 シンプルな構造から、多く利用されている。

【目次】

【本題】

CKEditorについて

CKEditorとは、WYSIWYGエディタの一種です。

WYSIWYGエディタは
ユーザーにリッチな編集画面を
提供する為のインターフェイスです。

ryoutaku-jo.hatenablog.com

WYSIWYGエディタは、いくつか出回っていますが、
その中でもCKEditorは、軽量で導入が比較的簡単なことから
古くから利用され続けています。

導入方法

CKEditorはgemも出回っているそうですが、
そちらはCarrierWaveしか対応していないのと、
CKEditorバージョン4系しか使えませんでした。

github.com

今回、画像アップロードは、shrineを利用したかったので、
gemではなく、npmを使って、CKEditorを導入しました。

www.npmjs.com

ちなみに、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>