リッチテキストエディタckeditor5の設置方法や使い方

ツール関連

「ウェブサイトにまるでワードプレスのエディターみたいなリッチな入力欄を設置したい」

そう思って、リッチテキストエディタであるckeditor5を導入することにしました

その使いかたや設置方法を、簡単に解説します

設置方法

ckeditorは本当にいろんな種類の設置方法を用意してるんですが、今回は最も簡単なCDNでの導入方法を紹介します

JSファイル(ckeditor)の読み込み

<script src="https://cdn.ckeditor.com/ckeditor5/18.0.0/classic/ckeditor.js"></script>

事前準備として、ckeditor５のCDNを読み込みます

場所は<head>内でも、<body>の最後でも好きなところで。

HTML

<div id="editor">ここに書いてある文章が初期に表示される文だよーー。編集してねー</div>

エディターを表示させたいところに、上記のhtmlを設置

Javascript

<script>
ClassicEditor
        .create( document.querySelector( '#editor' ) )
        .then( editor => {
                console.log( editor );
        } )
        .catch( error => {
                console.error( error );
        } );
</script>

最後にjavascriptで、エディターを生成

以上

たったこれだけで、リッチテキストが表示されます

ちなみに上記のはクラシックエディターと言って、オーソドックスなタイプのエディターの場合です

他にもInlineやBalloonと言ったエディターや、表示する項目を細かくカスタマイズできます

フォームの送信

フォームから送信する場合は、divタグでは値を送信できません

なので以下のようにHTMLタグをtextareaに変更することで送信できるようになります

<textarea name="editor" id="editor">ここに書いてある文章が初期に表示される文だよーー。編集してねー</textarea>

追記：その後、Quillに変更しました