この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:2
ページ更新者:T
更新日時:2018-09-30 07:39:14

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

前提

本稿はckeditor5の導入手順を説明します。

ckeditor5には「Builds」と「Framework」の2種類がある。

この2つの違いは「Builds」はスピーディに導入できる&最低限の機能のに対して「Framework」は機能が充実しているという感じらしいです。(雑なので追記求む)

今回は「Builds」の説明です。

↓「Builds」の機能

 

エディタのダウンロード

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

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

おそらく見栄えの問題。

今回は「Classic」を選択。

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

 

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

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

 

実装

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

<script src="ckeditor5-build-classic/ckeditor.js"></script>

 

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

<textarea id="editor">
    <p>Here goes the initial content of the editor.</p>
</textarea>
<script>
    ClassicEditor
        .create( document.querySelector( '#editor' ) )
        .then( editor => {
            console.log( editor );
        } )
        .catch( error => {
            console.error( error );
        } );
</script>

 

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

 

データの取得&設定

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

editor.setData( '<p>Some text.</p>' );

 

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

const data = editor.getData();

 

以上です。お疲れ様でした。