この記事の要点
CKEditor 5 はモダンな WYSIWYG リッチエディタ CDN 版: <script> タグ 1 行で導入できる最速ルート npm 版: npm install @ckeditor/ckeditor5-build-classic Vue / React / Angular 公式ラッパーあり カスタマイズビルドはOnline Builderかカスタムビルド構成で

 

CKEditor 5 とは

CKEditor 5 は、Web ページ内に組み込めるリッチテキストエディタ（WYSIWYG）。ブログ・CMS・コメント欄・問い合わせフォーム等で使われ、Markdown より直感的にユーザが装飾入力できます。

主要なビルド:

• Classic: ツールバー固定、最も標準的
• Inline: テキスト周辺にフローティングツールバー
• Balloon: 選択範囲にバルーン表示
• Document: ページ全体エディタ風

方法 1: CDN（最速）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>CKEditor 5 サンプル</title>
</head>
<body>

<div id="editor">
    <p>ここに入力できます。</p>
</div>

<script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/classic/ckeditor.js"></script>
<script>
ClassicEditor
    .create(document.querySelector("#editor"))
    .then(editor => {
        window.editor = editor;
    })
    .catch(error => {
        console.error(error);
    });
</script>

</body>
</html>

方法 2: npm

# インストール
$ npm install --save @ckeditor/ckeditor5-build-classic

# JavaScript
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

ClassicEditor
    .create(document.querySelector("#editor"))
    .then(editor => console.log(editor))
    .catch(err => console.error(err));

Vue.js で使う

# 公式コンポーネント
$ npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

<!-- App.vue -->
<template>
    <ckeditor
        :editor="editor"
        v-model="editorData"
        :config="editorConfig"
    />
</template>

<script>
import CKEditor from "@ckeditor/ckeditor5-vue";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

export default {
    components: {
        ckeditor: CKEditor.component
    },
    data() {
        return {
            editor: ClassicEditor,
            editorData: "<p>初期値の HTML</p>",
            editorConfig: {
                toolbar: ["heading", "|", "bold", "italic", "link", "bulletedList", "numberedList"]
            }
        };
    }
};
</script>

React で使う

# インストール
$ npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

function MyEditor() {
    return (
        <CKEditor
            editor={ClassicEditor}
            data="<p>初期 HTML</p>"
            onChange={(event, editor) => {
                const data = editor.getData();
                console.log(data);
            }}
        />
    );
}

主要 API

// 値の取得
const html = editor.getData();
// → "<p>入力した <strong>太字</strong> テキスト</p>"

// 値の設定
editor.setData("<p>新しい初期値</p>");

// 編集を無効化（リードオンリー）
editor.enableReadOnlyMode("my-lock");
editor.disableReadOnlyMode("my-lock");

// 破棄
await editor.destroy();

// イベント
editor.model.document.on("change:data", () => {
    console.log("内容が変更されました:", editor.getData());
});

editor.editing.view.document.on("focus", () => console.log("フォーカス"));
editor.editing.view.document.on("blur", () => console.log("ブラー"));

ツールバーのカスタマイズ

ClassicEditor
    .create(document.querySelector("#editor"), {
        toolbar: {
            items: [
                "heading", "|",
                "bold", "italic", "link", "|",
                "bulletedList", "numberedList", "|",
                "blockQuote", "insertTable", "|",
                "undo", "redo"
            ]
        },
        heading: {
            options: [
                { model: "paragraph", title: "段落", class: "ck-heading_paragraph" },
                { model: "heading1", view: "h1", title: "見出し 1", class: "ck-heading_heading1" },
                { model: "heading2", view: "h2", title: "見出し 2", class: "ck-heading_heading2" }
            ]
        },
        language: "ja",   // 日本語化
        link: {
            addTargetToExternalLinks: true,
            defaultProtocol: "https://"
        }
    });

画像アップロード

標準ビルドは画像アップロード機能が含まれません。サーバー連携が必要:

// 簡易アップロードアダプタ
class MyUploadAdapter {
    constructor(loader) { this.loader = loader; }

    upload() {
        return this.loader.file.then(file => new Promise((resolve, reject) => {
            const data = new FormData();
            data.append("upload", file);

            fetch("/api/upload", { method: "POST", body: data })
                .then(r => r.json())
                .then(result => resolve({ default: result.url }))
                .catch(reject);
        }));
    }

    abort() {}
}

ClassicEditor.create(document.querySelector("#editor"))
    .then(editor => {
        editor.plugins.get("FileRepository").createUploadAdapter = (loader) => new MyUploadAdapter(loader);
    });

日本語化

多言語ビルドではないため、日本語パッケージのインストールが必要:

# 日本語版 (npm)
$ npm install --save @ckeditor/ckeditor5-build-classic

import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import "@ckeditor/ckeditor5-build-classic/build/translations/ja";

ClassicEditor.create(document.querySelector("#editor"), {
    language: "ja"
});

セキュリティ注意

• HTML サニタイズ: ユーザ入力をそのまま保存・表示すると XSS の温床。サーバ側で sanitize（DOMPurify 等）必須
• 画像 URL のホワイトリスト: imageUploadUrl は信頼できるエンドポイントのみ
• iframe / script タグ無効化: 危険なタグは config の htmlSupport で除外

カスタムビルド

機能を絞った軽量ビルドを作りたい場合:

• Online Builder: 公式ビルダーで必要なプラグインを選択 → 自分専用ビルドをダウンロード
• npm + Webpack: 自前のプロジェクトで個別パッケージを組み合わせ

📸 参考画像

※ 旧バージョンから引き継いだ参考画像です。手順・図解の補助としてご覧ください。

関連記事

• CSVファイルダウンロード方法(Ajax)