ckeditor5 (Basic) の導入手順と使い方

方法 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

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 (
         {
                const data = editor.getData();
                console.log(data);
            }}
        />
    );
}

主要 API

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

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

// 編集を無効化（リードオンリー）
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)