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

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();
// '
編集された内容
'

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

// 編集領域を破棄
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 例）:

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 との違い

セキュリティ（XSS 対策）

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

purify($request->input('content'));

// または自前で許可タグだけ残す
$clean = strip_tags(
    $request->input('content'),
    '

'
);