1.

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

編集
この記事の要点
  • 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: 自前のプロジェクトで個別パッケージを組み合わせ

関連記事

📸 参考画像

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

参考画像

参考画像

編集
Post Share
子ページ

子ページはありません

同階層のページ

同階層のページはありません

2026-08-07 09:46:48 atom 6938

人気ページ

最近更新/作成されたページ