過去バージョン

前提

今回はckeditor5の導入手順を説明します。

BuildsとFrameworkの違い

ckeditor5には「Builds」と「Framework」の2種類があるみたいです。

この２つの違いは「Builds」はスピーディに導入できる＆最低限の機能のに対して「Framework」は機能が充実しているという感じらしいです。（雑）

今回は「Builds」を導入してみようと思います。（「Framework」は機会があれば）

↓「Builds」の機能

エディタのダウンロード

公式サイトでBuildを選ぶ

公式サイトにアクセスします。

「Builds」にも「Classic」、「Balloon」、「Inline」と３つの種類がある。

おそらく見栄えの問題。

今回は「Classic」を選択。

ダウンロード画面はこちら。

配布形式の選び方

今回は「Zip package」形式で導入します～。

理由は、「Command line」だとNode.js前提になるからNG。

「CDN」だとバグ改修とか勝手にやってくれて便利だろうけど外部依存になるのちょっと怖いからNG。

「Zip package」のダウンロードボタンを押すとメール購読者になるようせがまれるが登録しないでもダウンロード開始される。

実装

1. JSファイルの読み込み

まず解凍したフォルダ内にあるjsファイルを以下のように読み込む（同じ階層にある前提）

2. textareaにエディタを差し込む

次にエディタを表示させたい箇所に以下のコードを突っ込む。

<br />     <p>Here goes the initial content of the editor.</p><br />

3. 動作確認

すると以下のようにエディタが組み込まれていることを確認。

データの取得＆設定

データをセットする (setData)

データをセットしたい場合はsetData関数を使用する。

editor.setData( ' Some text. ' );

データを取り出す (getData)

逆に取り出したい場合はgetData関数を使用する。

const data = editor.getData();

補足

• サーバーへ保存する場合は getData() で取り出した文字列をフォーム送信やAjax POSTで渡す
• 初期表示の本文は </code> 内のHTMLがそのままエディタの初期内容になる</li> <li>本記事は Classic Build を Zip 配布で導入した手順。バージョンアップで一部APIや配布形態の細部が変わることがある</li> </ul> <h2>関連リンク</h2> <ul> <li><a href="https://ckeditor.com/ckeditor-5-builds/">CKEditor 5 Builds 公式</a></li> <li><a href="https://ckeditor.com/ckeditor-5-builds/download/">CKEditor 5 Builds ダウンロード</a></li> </ul> <p>おわり！</p> <p>ではまた　＾＾ノシ</p> </div> </div> </div> </div> </div> <div id="footer"><div class="move-top"></div> <div class="move-bottom"></div> <!-- フッタ開始 --> <footer id="footer"> <div class="footer-inner"> <div class="footer-grid"> <div class="footer-col"> <h4 class="footer-heading">CWiki</h4> <a href="https://jpn.itlibra.com">CWiki</a> <a href="https://jpn.itlibra.com/help">ヘルプ</a> <a href="https://jpn.itlibra.com/inquiry/post/form">問い合わせ</a> </div> <div class="footer-col"> <h4 class="footer-heading">Legal</h4> <a href="https://jpn.itlibra.com/termsOfService">利用規約</a> <a href="https://jpn.itlibra.com/privacyPolicy">プライバシーポリシー</a> </div> <div class="footer-col"> <h4 class="footer-heading">Feed</h4> <a href="https://jpn.itlibra.com/sitemap/sitemap-index.xml">サイトマップ</a> <a href="https://jpn.itlibra.com/feed/articles">ページのフィード</a> <a href="https://jpn.itlibra.com/feed/boards">掲示板のフィード</a> </div> <div class="footer-col"> <h4 class="footer-heading">Account</h4> <a href="https://jpn.itlibra.com/login">ログイン</a> </div> </div> <div class="footer-bottom"> <span>© 2017 Libra</span> </div> </div> </footer> <span id="page-bottom"></span> </div> </div> <!-- Scripts --> <!-- 表示速度とSEOの観点からbodyタグの一番下に記載する --> <!--<script src="https://jpn.itlibra.com/js/app.js" async></script>--> <script src="https://jpn.itlibra.com/js/common.js" async></script> <script src="https://jpn.itlibra.com/js/scroll.js" async></script> <script src="https://jpn.itlibra.com/js/jquery.sidebar.min.js"></script> <span></span> <!-- ローディング --> <div id="loading"> <div class="cv-spinner"> <span class="spinner"></span> </div> </div> </body> </html>