ページの作成

ページの作成

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

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

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

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
テンプレートを更新

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

前提

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

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

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

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

↓「Builds」の機能

 

エディタのダウンロード

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

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

おそらく見栄えの問題。

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

 

 

おわり!

ではまた ^^ノシ

 

子ページ
子ページはありません
同階層のページ
同階層のページはありません

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

最近の質問

コメント一覧

    No.2 | guest | 2020-04-04 02:56:06

    buy real viagra online viagra effectiveness after eating <a href=" https://pharm-usa-official.com/# #">viagra boner </a> can i take a viagra and any other enhancement at the same time? cialis or viagra after prostatectomy teva's generic viagra feeling like a young buck on viagra sex <a href=https://pharm-usa-official.com/#>cialis vs viagra </a> gnc substitute for viagra how much is viagra https://pharm-usa-official.com - viagra buy https://endlessdojrp.com/showthread.php?tid=15566 https://acessocultural.com.br/2020/01/marighella-de-wagner-moura-tem-estreia-confirmada-nos-cinemas/?unapproved=530768&moderation-hash=959a7ce6e576e63b8a4ea19202a24243#comment-530768 https://syrianconstitution2017.com/?p=7530&cpage=1&unapproved=93091&moderation-hash=43ed1bd9a8928286970c799ff1ed986e#comment-93091 http://www.ipc.org.co/agenciadeprensa/index.php/2010/06/04/conflicto-armado-tenia-ardiendo-altos-de-la-virgen-mucho-antes-que-el-fuego-se-lo-consumiera/?unapproved=1878291&moderation-hash=c4dcc786a59fec07f93f81afbdb64188#comment-1878291 http://www.jcecable.com/bbs/home.php?mod=space&uid=552829

    No.1 | guest | 2020-04-03 00:52:37

    viagra jokes for women viagra commercial actress nude <a href=" https://pharm-usa-official.com/# #">viagra generic </a> cheapest usa drug store for viagra can you take viagra and cialis gina valentina viagra viagra jokes <a href=https://pharm-usa-official.com/#>viagra buy </a> viagra commercial brunette actress nude can i get over ed without viagra https://pharm-usa-official.com - generic viagra 100mg http://manalifeguide.com/2018/07/11/hello-world/?unapproved=337395&moderation-hash=09af33cb4e555af6ea2b9e9ce85c5b94#comment-337395 http://www.almaoso3a.com/3747/39/11/%D8%A7%D9%84%D8%B3%D9%84%D8%A7%D8%AD%D9%81.html https://acessocultural.com.br/2020/01/marighella-de-wagner-moura-tem-estreia-confirmada-nos-cinemas/?unapproved=530768&moderation-hash=959a7ce6e576e63b8a4ea19202a24243#comment-530768 http://www.iratxoelkartea.com/acabar-el-ano-en-la-montana-2/?unapproved=984393&moderation-hash=fba7bedb3e9410839987186c8ba06a32#comment-984393 https://www.sohbetnova.com/turk-telekom-coktu-mu-telefon-neden-cekmiyor/?unapproved=165&moderation-hash=b89ae6d1527b8015d755e166c8788da8#comment-165