CKeitor5とは
CKeitor5とは
今回も、迷えるエンジニアキッズたちに、「CKeditor」の中毒性について教えていこう！！用意はいいかな？
■何ができるのか？
CKEditor 5（シーケーエディタ 5）は、ブラウザ上で利用できるリッチテキストエディタです。
WYSIWYG（What You See Is What You Get）方式で、文字の太字やリンクなどの装飾を編集しながら確認することができます。
CKEditorは、JavaScriptと互換性がよいので、多くのサイトなどで利用されています。
■画面について
【やってみて】
素人でも画像と文章を作れる。
エンジニアもカンタンに導入できる
カスタマイズが割と難しい
・CMSを作らなくてよい ・素人でも画像と文章を作れる。 ・DL版とCDN版がある |
具体的な利用方法
利用方法について書いていきます。今回はCDN版での利用方法です。
ファイルをダウンロードするよりもCDNを使えば簡単に使えます。
画像をアップロードして、特定のフォルダに保存する処理を書いていきます。色々長いので、頑張って読んでみてください。
【参照】
・meta部分にリンクを書く
・importmapで短縮
・import
・日本語化
・const editorConfig
・plugins:
・simpleUpload
・beforeSend: (xhr, formData)
・initialData:
などを正しく指定する必要があります。順番に見ていきましょう。
■meta部分に書く
<!--ckeditor --> <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.0.0/ckeditor5.css"> |
必要なcssなどをリンクで利用する。
■editor部分
const configの部分が色々な設定。
■id指定と、const部分
$course_txt['id'] = 'editor_course_txt'; //textareaのid ClassicEditor.create(document.querySelector('#editor_course_txt'), editorConfig); |
というように設定をして使います。
テキストエリアをつくり、その上から読み込むような感じです。
元のテキストエリアは見えなくなり、CKeditor5が表示されます。
■importmap
<script type="importmap"> |
import 文の中で 'ckeditor5' や 'ckeditor5/' で始まる短いモジュール指定子を使うだけで、
CDN 上の特定のバージョン (43.0.0) の CKEditor 5 のファイルが自動的に読み込まれるように設定しています。
つまり、ざっくり言うと、楽になるわけです。
■解説すると
「もし JavaScript コードの中で 'ckeditor5' というモジュール指定子を見つけたら、代わりに https://cdn.ckeditor.com/ckeditor5/43.0.0/ckeditor5.js という URL からモジュールを読み込んでください」という意味になります。
例えば、
JavaScript ファイル内で import ClassicEditor from 'ckeditor5'; と書いた場合、ブラウザはこの URL （https://cdn.ckeditor.com/ckeditor5/43.0.0/ckeditor5.js）にアクセスして CKEditor 5 の主要なモジュールをダウンロードします。
これは、「もし JavaScript コードの中で 'ckeditor5/' で始まるモジュール指定子を見つけたら
そのプレフィックスを
https://cdn.ckeditor.com/ckeditor5/43.0.0/ に置き換えてください」という意味になります。末尾のスラッシュ / が重要で、これがあることでプレフィックスとしてのマッピングになります。
JavaScript でモジュールを扱う際、import 文を使って外部のコードを読み込みます。import 文の中で、読み込みたいモジュールの場所を示す文字列が モジュール指定子 です。
<script type="importmap"> ブロックは、
ブラウザの JavaScript モジュールシステムである ES Modules において、モジュール指定子（module specifiers）の解決方法をカスタマイズするための仕組みです。
ES Modules と モジュール指定子:
JavaScript でモジュールを扱う際、import 文を使って外部のコードを読み込みます。import 文の中で、読み込みたいモジュールの場所を示す文字列が モジュール指定子 です。
JavaScript import { someFunction } from 'ckeditor5/src/core';
// 'ckeditor5/src/core' がモジュール指定子
ブラウザは通常、このモジュール指定子を URL に変換してモジュールをダウンロードします。
しかし、複雑なプロジェクトや CDN (Content Delivery Network) を利用する場合など、デフォルトの解決方法ではうまくいかないことがあります。
importmap の役割: importmap は、ブラウザに対して「特定のモジュール指定子を見つけたら、代わりにこの URL を使ってください」というマッピング情報を提供します。
これにより、以下のことが可能になります。
1.短縮されたモジュール指定子: 長い URL を import 文に書かずに、短い名前（例: ckeditor5) を使える。
2.CDN の利用: CDN 上の特定のバージョンのライブラリを指定できます。
3.内部モジュールのパスのマッピング: ライブラリ内の特定のパスを直接参照できます。
4.開発と本番環境でのパスの切り替え: 環境によって異なるモジュールの場所を指定できます。
■importmapの説明
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="importmap"> { "imports": { "lit": "https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js", "react": "https://unpkg.com/react@18/umd/react.development.js", "react-dom": "https://unpkg.com/react-dom@18/umd/react-dom.development.js" } } </script> </head> |
importmapは、パスを指定する代わりに、任意の文字で代用できる仕組み。
と書いて、URLとエイリアス名（略名）を記入します。
指定しても、すぐにはダウンロードされません。実際にJavaScriptの中で必要になったときに初めてダウンロードされるようです。
<head> <meta charset="UTF-8"> <title>Document</title> <script type="importmap"> { "imports": { "lit": "https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js", "react": "https://unpkg.com/react@18/umd/react.development.js", "react-dom": "https://unpkg.com/react-dom@18/umd/react-dom.development.js" } } </script> </head> |
■JSのimportmapとは
importmapは、ブラウザで実行するimport構文によって読み込まれるパッケージのURLを指定することができるようにします。importmapを一度指定すると、ドキュメント全体でエイリアスを使ったimport構文が書けるようになります。
<script type="module"> と書いて使う |
つまり、マッピングして利用ができるらしいです。
さて次
■import
import { SimpleUploadAdapter ｝ |
import の部分に追加しておく。
これで使えるようになります。
■日本語化
import translations from 'ckeditor5/translations/ja.js'; |
日本語で利用が出来るようになる。
■const editorConfig
const editorConfig = { |
エディターの設定です。必要な画像アイコンを表示させます。
'|'は区切りの線です。
■plugins:
plugins: [/ SimpleUploadAdapter, .... .... ], |
プラグインで追加します。
■simpleUpload
simpleUpload: { uploadUrl: '<?= base_url("/お好きなURL/") ?>', //アップロード処理を書いたコントローラなどに飛ばします。 headers: { |
アップロードするURLを指定します。フォルダを作りたかったので、コントローラをつくり、そこで、ファイル作成処理をしました。
■beforeSend: (xhr, formData)
beforeSend: (xhr, formData) => { |
POSTでコントローラに送れる。
FormData は Web 開発で、特にファイルアップロードをするのによく使います。
特定のデータを用意しておき、キーとバリューの形で飛ばします。（ key : value )で書くのは、JSONを勉強すると、おなじみですね。
■補足
サーバー側の PHP コード（あなたが提供したコード）が画像を受け取り、保存などの処理を行い、成功すれば {"uploaded": true, "url": "画像のURL"} という JSON レスポンスを返します。
echo json_encode(['uploaded' => true, |
SimpleUploadAdapter は、サーバーからのレスポンスを監視しています。
レスポンスの uploaded プロパティが true であれば、url プロパティに記載されている画像の URL を取得してくれます。さらにエディタ内にその画像を挿入する処理を行います。
つまり、trueと画像URLがあれば、それを使ってくれるわけです。
■initialData:
initialData: `<?php echo $OOO; ?>`, // PHPから初期データを渡す language: 'ja', |
初期値をわたしておきます。
テーブルから持ってきたデータを処理して、変数でわたします。
json_encode
echo json_encode(['uploaded' => true, |
考察
SimpleUploadAdapterを利用して、さらに、FormDataをつかって、値を用意する。
みたいな感じです。
はまった部分はJSでサーバーにフォルダを作れない事に気が付かなかった事です。途中で気が付いて、コントローラに飛ばして、フォルダをつくる処理をして、データを処理し、JSで戻す。というコードを追加しました。
画像を特定のフォルダに保存するには、コントローラを作った方がいいです。
importmapや非同期通信、JSONの知識も必要になるので、注意してください。fetch()の知識なども合わせて勉強しておくと良いです。
少しでも役に立ったら、友達登録しといてくれい～～、全力で迷惑メールを送り付けてやるぜ＾＾
CKeditor5の学習
・DL版と、CDN版がある
・初期値を設定しよう
・アイコンを覚えよう
