1.

ckeditor5(Basic)の導入手順と使い方

編集
ページの作成
テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！

前提

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

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

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

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

↓「Builds」の機能

 

エディタのダウンロード

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

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

おそらく見栄えの問題。

今回は「Classic」を選択。

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

 

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

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

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

 

「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();

 

 

おわり！

ではまた　＾＾ノシ

 

編集
ページの作成
テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！
子ページ
子ページはありません
同階層のページ
同階層のページはありません

人気ページ

最近更新/作成されたページ