1.

CKEditor 5 導入ガイド（CDN / npm / 設定 / 画像アップロード / Laravel・Django 統合）

▶
編集
この記事の要点
  • CKEditor は OSS のリッチテキストエディタ。CKEditor 5 が現行。Classic / Inline / Balloon / Document の 4 ビルドが公式提供
  • 導入は CDN なら <script src="https://cdn.ckeditor.com/ckeditor5/41.x/classic/ckeditor.js"> → ClassicEditor.create(el)
  • 内容取得 / 設定は editor.getData() / editor.setData(html)
  • 画像アップロードは SimpleUploadAdapter（サーバに POST して JSON で URL を返す方式）が最小構成
  • CKEditor 4 → 5 で 全面リライト。設定 / プラグイン / API が非互換。データ形式（HTML）は概ね互換

CKEditor とは

CKEditor は CKSource 社が開発する OSS の WYSIWYG リッチテキストエディタ。WordPress、GitLab、SAP 等で採用。現行バージョンは CKEditor 5（CKEditor 4 はサポート終了済み）。

ビルド特徴用途
Classic固定ツールバー + 編集領域CMS / フォーム / ブログ投稿
Inline編集領域そのものに直接編集インライン編集 / Wiki
Balloon選択時にツールバーが浮かぶミニマルな UI
DocumentWord 風の見た目長文ドキュメント編集

CDN で最速導入

<!DOCTYPE html>
<html>
<body>

<textarea id="editor">
  <p>初期値の HTML</p>
</textarea>

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

npm でカスタムビルド

npm install @ckeditor/ckeditor5-build-classic
# またはより細かく
npm install @ckeditor/ckeditor5-editor-classic \
            @ckeditor/ckeditor5-essentials \
            @ckeditor/ckeditor5-paragraph \
            @ckeditor/ckeditor5-basic-styles \
            @ckeditor/ckeditor5-link \
            @ckeditor/ckeditor5-list \
            @ckeditor/ckeditor5-image
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

ClassicEditor
  .create(document.querySelector('#editor'), {
    toolbar: [
      'heading', '|',
      'bold', 'italic', 'underline', '|',
      'link', 'bulletedList', 'numberedList', '|',
      'imageUpload', 'blockQuote', 'insertTable', '|',
      'undo', 'redo'
    ],
    image: {
      toolbar: ['imageTextAlternative', 'imageStyle:full', 'imageStyle:side']
    },
    table: {
      contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells']
    },
    language: 'ja',
  })
  .then(editor => {
    console.log('Editor was initialized', editor);
  })
  .catch(error => console.error(error));

主要 API

// HTML を取得
const html = editor.getData();
// '<p>編集された内容</p>'

// HTML をセット
editor.setData('<p>差し替える内容</p>');

// 編集領域を破棄
editor.destroy();

// イベント
editor.model.document.on('change:data', () => {
  console.log('変更検知:', editor.getData());
});

// 読み取り専用
editor.enableReadOnlyMode('lockId');
editor.disableReadOnlyMode('lockId');

// フォーカス
editor.focus();

画像アップロード: SimpleUploadAdapter

標準で組み込まれている最も簡単な方法。サーバ側に POST し、JSON で URL を返すだけ:

ClassicEditor.create(document.querySelector('#editor'), {
  simpleUpload: {
    uploadUrl: '/api/upload-image',
    headers: {
      'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
      Authorization: 'Bearer ' + token,
    }
  }
});

サーバ側（Laravel 例）:

<?php
// routes/api.php
Route::post('/upload-image', [UploadController::class, 'image']);

// app/Http/Controllers/UploadController.php
public function image(Request $request) {
    $request->validate([
        'upload' => 'required|image|max:5120',  // CKEditor は 'upload' フィールドで送る
    ]);

    $path = $request->file('upload')->store('uploads', 'public');
    $url  = asset('storage/' . $path);

    // CKEditor が期待するレスポンス形式
    return response()->json([
        'url' => $url,
    ]);
}

Django 統合

# pip install django-ckeditor-5
# settings.py
INSTALLED_APPS = [
    # ...
    'django_ckeditor_5',
]

CKEDITOR_5_CONFIGS = {
    'default': {
        'toolbar': ['heading', '|', 'bold', 'italic', 'link',
                    'bulletedList', 'numberedList', 'blockQuote', 'imageUpload'],
    },
}

# models.py
from django_ckeditor_5.fields import CKEditor5Field

class Article(models.Model):
    body = CKEditor5Field('Body', config_name='default')

# urls.py
urlpatterns = [
    path('ckeditor5/', include('django_ckeditor_5.urls')),
]

CKEditor 4 との違い

項目CKEditor 4CKEditor 5
初期化CKEDITOR.replace('id')ClassicEditor.create(el)
APIグローバル CKEDITORモジュラー / ES6
データモデルDOM 直接独自仮想 DOM
取得editor.getData()editor.getData()
プラグイン多数あり選り抜き（リライト中）
共同編集非対応対応（商用機能）
サポート2023 EOL現行

セキュリティ（XSS 対策）

CKEditor で入力した HTML を表示するときは、サーバ側で必ずサニタイズ:

<?php
// Laravel + HTMLPurifier
$purifier = new HTMLPurifier();
$clean = $purifier->purify($request->input('content'));

// または自前で許可タグだけ残す
$clean = strip_tags(
    $request->input('content'),
    '<p><br><strong><em><u><a><ul><ol><li><h2><h3><img>'
);

FAQ

Q: 日本語化したい
A: 設定で language: 'ja'。CDN ビルドには日本語訳も同梱されています。

Q: 文字数カウントを表示したい
A: WordCount プラグインを追加。toolbar ではなく editor.plugins.get('WordCount').wordCountContainer でカウンタ要素を取得して挿入します。

Q: 完全に無料で使えるか
A: 基本機能は GPL/MIT 系で無料。共同編集 / 高度な変更履歴 / コメント機能は商用ライセンス（CKEditor Premium）が必要です。

📸 参考画像

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

参考画像

編集
Post Share
子ページ
  1. ckeditor5(Basic)の導入手順と使い方
同階層のページ
  1. CKEditor
  2. vi
2026-06-11 07:12:00 T 653

人気ページ

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