ページの作成

ページの作成

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

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子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.1129 | guest | 2023-01-22 00:41:48

    coursework writing uk [url="https://brainycoursework.com"]coursework questions[/url] coursework writing service

    No.1128 | guest | 2022-12-25 06:26:25

    https://hydroxychloroquinex.com/ hydroxychloroquine 200 mg

    No.1127 | guest | 2022-12-15 23:16:34

    <a href="http://www.candipharm.com/# ">candipharm</a>

    No.1126 | guest | 2022-12-11 09:53:33

    <a href="http://candipharm.com/ ">www.candipharm.com/</a>

    No.1125 | guest | 2022-11-28 04:30:45

    write my essays <a href=https://buytopessays.com>best online essay writers</a> cheap essay services

    No.1124 | guest | 2022-11-25 09:10:03

    best writing services <a href=https://buyacademicessay.com>professional essay writers for hire</a> cheap essay writers

    No.1123 | guest | 2022-11-24 02:11:52

    help writing a descriptive essay <a href=https://bestsessays.org>essay service review</a> essay writing helper

    No.1122 | guest | 2022-11-22 16:49:07

    usa essay writing services <a href=https://bestessaysden.com>pay for essay cheap</a> essay writing services toronto

    No.1121 | guest | 2022-11-21 09:08:30

    essay services reviews <a href=https://bestessayreviews.net>essay editor service</a> buy essay papers

    No.1120 | guest | 2022-11-20 02:11:28

    online help with essay writing <a href=https://besteasyessays.org>helping writing essay</a> custom written essays

    No.1119 | guest | 2022-11-16 00:11:45

    best websites for essays <a href=https://au-bestessays.org>best essays</a> write my essay for cheap

    No.1118 | guest | 2022-11-15 05:18:28

    Pills information. Short-Term Effects. <a href="https://propecia4nowall.top">propecia without a prescription</a> in Canada Best trends of medicament. Get here.

    No.1117 | guest | 2022-08-15 19:21:57

    У меня для Вас сразу 5 новостей, они помогут Вам в продвижении. Обратите внимание на новый инструмент, который: 1. Поможет в создании контент плана 2. Находит Email адреса Вашей целевой аудитории 3. Собирает контакты целевой аудитории на социальные сети для дальнейшей рекламы 4. Проследит за Вашими конкурентами, что бы Вы были в курсе, что они делают и как продвигаются. 5. Поможет в анализе рынка конкретно в Вашей нише. Подробнее на videostat.online

    No.1061 | guest | 2021-12-21 07:05:37

    Amoxicillin Dosage Amounts

    No.1060 | guest | 2021-12-20 14:30:14

    Amoxicillin Side Effects In Cats

    No.1058 | guest | 2021-12-19 20:28:32

    Zithromax 500mg Online

    No.1046 | guest | 2021-12-11 09:37:47

    effects of cialis common side

    No.1042 | guest | 2021-12-09 13:26:34

    Medicament Generique Du Viagra

    No.1038 | guest | 2021-12-07 14:14:10

    Avanfil

    No.1037 | guest | 2021-12-07 07:04:38

    Commander Viagra Pharmacie

    No.1034 | guest | 2021-12-05 11:09:41

    Cephalexin Rimadyl Mix

    No.1022 | guest | 2021-11-16 03:31:56

    verapamil and cialis

    No.1021 | guest | 2021-11-11 19:16:51

    Is Keflex A Generic Drug

    No.1018 | guest | 2021-11-10 22:49:34

    On Line Worldwide Progesterone Discount

    No.1010 | guest | 2021-11-05 03:33:03

    Antibiotics For Herpes Amoxicillin

    No.1009 | guest | 2021-11-03 10:19:42

    Cialis Vendita Onlin 5mg Generico

    No.1007 | guest | 2021-11-01 13:24:45

    Posologia Propecia Dia

    No.1005 | guest | 2021-10-31 22:27:03

    Achat Cialis Meilleur Prix

    No.1004 | guest | 2021-10-31 14:37:30

    Buy Now Flagyl Cheap Online

    No.1000 | guest | 2021-10-30 14:58:35

    Trazodone Canada

    No.987 | guest | 2021-10-04 06:36:18

    Vente Baclofene

    No.985 | guest | 2021-10-03 00:18:13

    Mtabs Scam

    No.980 | guest | 2021-09-21 09:34:55

    Levitra Italiano

    No.977 | guest | 2021-09-18 11:39:49

    cialis without a perscription

    No.975 | guest | 2021-09-16 20:24:56

    Dogs Amoxicillin

    No.967 | guest | 2021-09-06 22:15:53

    Fda Approved Canadian Online Pharmacies

    No.964 | guest | 2021-08-29 19:46:06

    Donde Comprar Cialis Farmacia

    No.962 | guest | 2021-08-29 14:44:49

    generic cialis sweet

    No.957 | guest | 2021-08-20 08:02:50

    смотреть фильмы онлайн бесплатно

    No.771 | guest | 2021-08-11 02:48:41

    Фильм Дом Гуччи смотреть онлайн

    No.769 | guest | 2021-08-08 08:23:28

    Дом Гуччи 2021 смотреть онлайн