タイトル: ckeditor5(Basic)の導入手順と使い方

SEOタイトル: ckeditor5 (Basic) の導入手順と使い方

この記事の要点

CKEditor 5 (Basic / Classic Build) を Web ページに導入する手順
配布形態は Builds（即導入） と Framework（カスタム）の 2 種
本稿は Zip Package 配布形式 + Classic Build の最短導入
実装は 1) ckeditor.js 読込 → 2) </code> 用意 → 3) <code>ClassicEditor.create()</code></strong></li> </ul> </td> </tr> </tbody> </table> <p> </p> <p><img alt="" src="/uploadImage/20180124235244_4127600.png" /></p> <h2>前提</h2> <p>今回は<span style="color:#e74c3c">ckeditor5の導入手順</span>を説明します。</p> <h3>BuildsとFrameworkの違い</h3> <p>ckeditor5には「<strong>Builds</strong>」と「<strong>Framework</strong>」の2種類があるみたいです。</p> <p>この２つの違いは「<strong>Builds</strong>」はスピーディに導入できる＆<span style="color:#2980b9">最低限の機能</span>のに対して「<strong>Framework</strong>」は<span style="color:#e74c3c">機能が充実</span>しているという感じらしいです。（雑）</p> <p>今回は「<strong>Builds</strong>」を導入してみようと思います。（「<strong>Framework</strong>」は機会があれば）</p> <p><span style="color:#27ae60">↓「<strong>Builds</strong>」の機能</span></p> <p><img alt="" src="/uploadImage/20180125003424_9821642.png" /></p> <h2>エディタのダウンロード</h2> <h3>公式サイトでBuildを選ぶ</h3> <p><a href="https://ckeditor.com/ckeditor-5-builds/">公式サイト</a>にアクセスします。</p> <p>「<strong>Builds</strong>」にも「<strong>Classic</strong>」、「<strong>Balloon</strong>」、「<strong>Inline</strong>」と３つの種類がある。</p> <p>おそらく見栄えの問題。</p> <p>今回は「<strong>Classic</strong>」を選択。</p> <p>ダウンロード画面は<a href="https://ckeditor.com/ckeditor-5-builds/download/">こちら</a>。</p> <h3>配布形式の選び方</h3> <p>今回は「<strong>Zip package</strong>」形式で導入します～。</p> <p>理由は、「<strong>Command line</strong>」だとNode.js前提になるからNG。</p> <p>「<strong>CDN</strong>」だとバグ改修とか勝手にやってくれて便利だろうけど外部依存になるのちょっと怖いからNG。</p> <p>「<strong>Zip package</strong>」のダウンロードボタンを押すとメール購読者になるようせがまれるが登録しないでもダウンロード開始される。</p> <h2>実装</h2> <h3>1. JSファイルの読み込み</h3> <p>まず解凍したフォルダ内にあるjsファイルを以下のように読み込む（同じ階層にある前提）</p> <table border="1" cellpadding="1" cellspacing="1" style="width:500px"> <tbody> <tr> <td style="background-color:#ffffff"><script src="ckeditor5-build-classic/ckeditor.js"></script></td> </tr> </tbody> </table> <h3>2. textareaにエディタを差し込む</h3> <p>次にエディタを表示させたい箇所に以下のコードを突っ込む。</p> <table border="1" cellpadding="1" cellspacing="1" style="width:500px"> <tbody> <tr> <td style="background-color:#ffffff"> <p><textarea id="editor"><br /> <p>Here goes the initial content of the editor.</p><br /> </textarea><br /> <script><br /> ClassicEditor<br /> .create( document.querySelector( '#editor' ) )<br /> .then( editor => {<br /> console.log( editor );<br /> } )<br /> .catch( error => {<br /> console.error( error );<br /> } );<br /> </script></p> </td> </tr> </tbody> </table> <h3>3. 動作確認</h3> <p>すると以下のようにエディタが組み込まれていることを確認。</p> <p><img alt="" src="/uploadImage/20180125003424_9821642.png" /></p> <h2>データの取得＆設定</h2> <h3>データをセットする (setData)</h3> <p>データをセットしたい場合は<strong>setData関数</strong>を使用する。</p> <table border="1" cellpadding="1" cellspacing="1" style="width:500px"> <tbody> <tr> <td style="background-color:#ffffff">editor.setData( '<p>Some text.</p>' );</td> </tr> </tbody> </table> <h3>データを取り出す (getData)</h3> <p>逆に取り出したい場合は<strong>getData関数</strong>を使用する。</p> <table border="1" cellpadding="1" cellspacing="1" style="width:500px"> <tbody> <tr> <td style="background-color:#ffffff">const data = editor.getData();</td> </tr> </tbody> </table> <h2>補足</h2> <ul> <li>サーバーへ保存する場合は <code>getData()</code> で取り出した文字列をフォーム送信やAjax POSTで渡す</li> <li>初期表示の本文は <code><textarea></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>    <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>

IT総合Wiki

過去バージョン

タイトル: ckeditor5(Basic)の導入手順と使い方

SEOタイトル: ckeditor5 (Basic) の導入手順と使い方

IT総合Wiki

過去バージョン

タイトル: ckeditor5(Basic)の導入手順と使い方 SEOタイトル: ckeditor5 (Basic) の導入手順と使い方

タイトル: ckeditor5(Basic)の導入手順と使い方

SEOタイトル: ckeditor5 (Basic) の導入手順と使い方