【CKEditor5】リッチなテキストエディタを手軽に実装したい

本投稿は TECOTEC Advent Calendar 2024 の16日目の記事です。

こんにちは、決済認証システム開発事業部の木村です。普段はエンジニアとして主にPHPでWebアプリケーションのシステムの開発を行っています。

最近は社内プロジェクトでフロントエンドに触れる機会も多くなりました。先日も、Web上でリッチテキストエディタの入力フォームを実装するということで、実装方法について調査していました。今回は、CKEditorを用いたLaravel＋Bladeでのリッチテキストエディタ編集機能の実装についてまとめたいと思います！

CKEditorについて

ckeditor.com

CKEditorは、オープンソースのWYSIWYG *1 テキストエディターです。

有料版・無料版がありますが、無料版でも必要十分なプラグイン数があるのも非常にありがたいですね。

今回はCKEditor5の無料版で実装してみたいと思います。

動作環境

# Node.jsのバージョン確認
$ node -v
v18.17.0

# npmのバージョン確認
$ npm -v
9.6.7

# Laravelのバージョン確認
$ sail artisan -v
Laravel Framework 10.31.0
~

インストール～ライブラリ宣言

公式でダウンロード可能なパッケージも用意されていますが、今回は手っ取り早くnpmでインストールしたいと思います。

www.npmjs.com

$ npm i ckeditor5

インストールが完了したら、js側で使用したいライブラリの宣言をします。この際にテキストエディタで使いたいツールのプラグインも宣言してください。今回は基本的な機能として、太字・斜体・フォント・段落・アライメント・採番・リンクを使ってみたいと思います！

import {
  ClassicEditor,
  Essentials,
  Bold,
  Italic,
  Font,
  Paragraph,
  Alignment,
  List,
  Link,
} from 'ckeditor5';
window.ClassicEditor = ClassicEditor;
window.Essentials = Essentials;
window.Bold = Bold;
window.Italic = Italic;
window.Font = Font;
window.Paragraph = Paragraph;
window.Alignment = Alignment;
window.List = List;
window.Link = Link;
import 'ckeditor5/ckeditor5.css';

宣言の際、最後にcssの宣言を忘れないようにしましょう。これが無いとツールバーの表示が崩れます。

フロント側の実装

CKEditorを表示したい箇所にid指定

<!-- ここがCKEditorに置き換わる -->
<div id="editor"></div>

画面初期表示時にCKEditorを呼び出して置き換える処理を書きます。

if (document.getElementById('editor')) {
  ClassicEditor
    .create( document.querySelector( '#editor' ), ckeditorConfig)
      .then( newEditor => {
        editor = newEditor;
      })
      .catch( error => {
        console.error( error );
      });
}

CKEditorの設定はこんな感じです。plugins・toolbarに宣言したプラグイン名を記載することで各種ツールを呼び出せます。ツールバーの表示順も任意に変更可能で、'|'で各ツールの間に区切りのラインを表示することもできます。

ckeditorConfig.js

/**
 * CKEditorの共通設定項目
 */
export let editorConfig = {
  plugins: [ Essentials, Bold, Italic, Font, Paragraph, Alignment, List, Link],
  // ツールバーに表示する機能一覧
  toolbar: [
    'undo', 'redo', '|', 'bold', 'italic', '|',
    'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', '|',
    'alignment', '|',
    'bulletedList', 'numberedList', '|', 'link'
  ]
}

実装が完了したらコンパイルして、CKEditorのテキストエディタがうまく表示できるか確認します。

$ npm run dev

おぉ～

ちなみにですが一番左上に表示される戻る・やり直しボタンはとくに設定しなくても自動で表示されて使えます。難しいことをしなくてもこれだけの機能を手軽に実装できるのは便利ですね！

【ちょっと応用】各ツールの細かな設定を改変したい

デフォルトの状態ですと日本語向けのフォントが無かったり、細かなフォントサイズの指定ができなかったりします。このような場合でも、editorConfigメソッドに追記することである程度対応可能です！以下に実装の一例を紹介します。

export let editorConfig = {
    plugins: [ Essentials, Bold, Italic, Font, Paragraph, Alignment, List, Link],
    // ツールバーに表示する機能一覧
    toolbar: [
        'undo', 'redo', '|', 'bold', 'italic', '|',
        'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', '|',
        'alignment', '|',
        'bulletedList', 'numberedList', '|', 'link'
    ],
    // 使用フォントを追加する
    fontFamily: {
        options: [
            'default',
            'Times New Roman',
            'Arial',
            'MS Gothic',
            'MS PGothic',
            'MS Mincho',
            'MS PMincho',
            'Yu Gothic',
            'Yu Gothic UI',
            'Yu Mincho',
            'Meiryo',
        ]
    },
    // 任意のフォントサイズを追加する
    fontSize: {
        options: [
            9,
            11,
            13,
            'default',
            17,
            19,
            21,
            24,
            36
        ]
    },
    // カラータイルを任意のものに変更する
    fontColor: {
        colors: [
            {
                color: '#000000',
                label: '黒'
            },
            {
                color: '#FF0000',
                label: '赤'
            },
            {
                color: '#0000FF',
                label: '青'
            },
            {
                color: '#008000',
                label: '緑'
            },
            {
                color: '#FF00FF',
                label: 'マゼンタ'
            },
        ]
    }****
}

フォントを追加する場合、optionsキーに配列形式でフォント名を追加してください。システムで使用可能なフォントは基本的にこれだけで使えるようになります。

CKEditorでのフォント色・フォント背景色ですが、デフォルトだとHTML上では以下のようにhsl形式で表現される仕様となっています。

<span style="color:hsl(0, 100%, 50%);">赤文字を表示する場合</span>

WEB上で表示するだけでしたらこれで問題ありませんが、例えばメールでこれらを表示する場合、一部のメールクライアント（主にOutloook）でhslのスタイルが無視されるようです。なのでHTMLメール上でフォントカラーを正確に表現したい場合、上のサンプルコードのようにCKEditor上でカラーコードをHEX形式で指定するのをおすすめします。