過去バージョン

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
	<thead><tr><th style="background-color:#f39c12;color:#ffffff;text-align:left">この記事の要点</th></tr></thead>
	<tbody><tr><td style="background-color:#fef9e7"><ul>
				<li>CKEditor 5 はモダンな WYSIWYG リッチエディタ</li>
				<li><strong>CDN 版</strong>: <code><script></code> タグ 1 行で導入できる最速ルート</li>
				<li><strong>npm 版</strong>: <code>npm install @ckeditor/ckeditor5-build-classic</code></li>
				<li><strong>Vue / React / Angular 公式ラッパー</strong>あり</li>
				<li>カスタマイズビルドは<strong>Online Builder</strong>か<strong>カスタムビルド構成</strong>で</li>
			</ul></td></tr></tbody>
</table>

<p>&nbsp;</p>

<h2>CKEditor 5 とは</h2>

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

<p>主要なビルド:</p>

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

<h2>方法 1: CDN（最速）</h2>
<pre style="background:#0f172a;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;font-family:Consolas,Monaco,monospace;font-size:0.9em;line-height:1.5"><code><!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></code></pre>


<h2>方法 2: npm</h2>
<pre style="background:#0f172a;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;font-family:Consolas,Monaco,monospace;font-size:0.9em;line-height:1.5"><code># インストール
$ 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));</code></pre>


<h2>Vue.js で使う</h2>
<pre style="background:#0f172a;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;font-family:Consolas,Monaco,monospace;font-size:0.9em;line-height:1.5"><code># 公式コンポーネント
$ npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic</code></pre>

<pre style="background:#0f172a;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;font-family:Consolas,Monaco,monospace;font-size:0.9em;line-height:1.5"><code><!-- 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></code></pre>


<h2>React で使う</h2>
<pre style="background:#0f172a;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;font-family:Consolas,Monaco,monospace;font-size:0.9em;line-height:1.5"><code># インストール
$ npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic</code></pre>

<pre style="background:#0f172a;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;font-family:Consolas,Monaco,monospace;font-size:0.9em;line-height:1.5"><code>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);
            }}
        />
    );
}</code></pre>


<h2>主要 API</h2>
<pre style="background:#0f172a;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;font-family:Consolas,Monaco,monospace;font-size:0.9em;line-height:1.5"><code>// 値の取得
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("ブラー"));</code></pre>


<h2>ツールバーのカスタマイズ</h2>
<pre style="background:#0f172a;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;font-family:Consolas,Monaco,monospace;font-size:0.9em;line-height:1.5"><code>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://"
        }
    });</code></pre>


<h2>画像アップロード</h2>

<p>標準ビルドは画像アップロード機能が含まれません。サーバー連携が必要:</p>
<pre style="background:#0f172a;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;font-family:Consolas,Monaco,monospace;font-size:0.9em;line-height:1.5"><code>// 簡易アップロードアダプタ
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);
    });</code></pre>


<h2>日本語化</h2>

<p>多言語ビルドではないため、日本語パッケージのインストールが必要:</p>
<pre style="background:#0f172a;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;font-family:Consolas,Monaco,monospace;font-size:0.9em;line-height:1.5"><code># 日本語版 (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"
});</code></pre>


<h2>セキュリティ注意</h2>

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

<h2>カスタムビルド</h2>

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

<ul>
	<li><strong>Online Builder</strong>: <a href="https://ckeditor.com/ckeditor-5/online-builder/">公式ビルダー</a>で必要なプラグインを選択 → 自分専用ビルドをダウンロード</li>
	<li><strong>npm + Webpack</strong>: 自前のプロジェクトで個別パッケージを組み合わせ</li>
</ul>

<h2>関連記事</h2>

<ul>
	<li><a href="/article/20570">CSVファイルダウンロード方法(Ajax)</a></li>
</ul>