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

2020年6月12日ツール関連

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

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

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

設置方法

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

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

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

事前準備として、ckeditor5の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に変更しました

エンジニアの年収を上げる方法

フリーランスエンジニアで年収を大幅アップしませんか?
実際に私は会社員からフリーランスエンジニアになって年収が87万円アップしました

今なら相談(ヒアリング)するだけで3,000円分のamazonギフト券がもらえます!
初めての案件契約で最大10万円分の準備金がもらえます
非公開の高単価案件(100万円超え)が多数あります

詳しくはこちら