CKEditor5 从源码集成到Vite项目的完整指南

史恋姬Quimby

于 2025-06-04 09:04:48 发布

阅读量423

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_01018/article/details/148416300

CKEditor5 从源码集成到Vite项目的完整指南

ckeditor5 具有模块化架构、现代集成和协作编辑等功能的强大富文本编辑器框架项目地址: https://gitcode.com/gh_mirrors/ck/ckeditor5

前言

本文将详细介绍如何在Vite项目中从源码集成CKEditor5富文本编辑器。与直接使用预构建版本不同，这种方法让你能够完全控制编辑器的构建过程，可以自由选择需要的功能模块并进行深度定制。

为什么选择从源码集成

从源码集成CKEditor5相比使用预构建版本有几个显著优势：

完全控制：可以精确选择需要的功能模块
灵活配置：能够自定义工具栏布局和编辑器行为
优化体积：只包含实际需要的功能，减少最终打包体积
深度定制：便于进行主题和样式的深度修改

环境准备

系统要求

Node.js 18+或20+版本
npm 7+版本（建议使用最新稳定版）
Vite 4+版本

初始化Vite项目

首先创建一个基础的Vite项目：

npm create vite@latest ckeditor5-vite-example -- --template vanilla

如果需要使用TypeScript：

npm create vite@latest ckeditor5-vite-example -- --template vanilla-ts

安装CKEditor5核心包

基础编辑器包

首先安装编辑器核心包和默认主题：

npm install --save @ckeditor/ckeditor5-editor-classic @ckeditor/ckeditor5-theme-lark

功能插件包

根据需求安装所需的功能插件，例如：

npm install --save \
  @ckeditor/ckeditor5-essentials \
  @ckeditor/ckeditor5-autoformat \
  @ckeditor/ckeditor5-basic-styles \
  @ckeditor/ckeditor5-block-quote \
  @ckeditor/ckeditor5-heading \
  @ckeditor/ckeditor5-link \
  @ckeditor/ckeditor5-list \
  @ckeditor/ckeditor5-paragraph

Vite配置

安装Vite插件

CKEditor5提供了专门的Vite插件来处理样式和图标资源：

npm install --save @ckeditor/vite-plugin-ckeditor5

配置vite.config.js

在项目根目录创建或修改vite.config.js文件：

import { createRequire } from 'node:module';
const require = createRequire(import.meta.url);

import { defineConfig } from 'vite';
import ckeditor5 from '@ckeditor/vite-plugin-ckeditor5';

export default defineConfig({
  plugins: [
    ckeditor5({ theme: require.resolve('@ckeditor/ckeditor5-theme-lark') })
  ]
});

编辑器配置与使用

方法一：创建编辑器子类

这种方法适合需要复用编辑器配置的场景。

JavaScript版本

创建src/ckeditor.js文件：

import { ClassicEditor as ClassicEditorBase } from '@ckeditor/ckeditor5-editor-classic';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
// 导入其他需要的插件...

export default class ClassicEditor extends ClassicEditorBase {}

ClassicEditor.builtinPlugins = [
  Essentials,
  // 添加其他插件...
];

ClassicEditor.defaultConfig = {
  toolbar: {
    items: [
      'heading', '|',
      'bold', 'italic', 'link',
      'bulletedList', 'numberedList',
      'blockQuote', 'undo', 'redo'
    ]
  },
  language: 'en'
};

在main.js中使用：

import ClassicEditor from './src/ckeditor';

ClassicEditor
  .create(document.querySelector('#app'))
  .then(editor => {
    console.log('编辑器初始化完成', editor);
  })
  .catch(error => {
    console.error(error.stack);
  });

TypeScript版本

创建src/ckeditor.ts文件：

import { ClassicEditor as ClassicEditorBase } from '@ckeditor/ckeditor5-editor-classic';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
// 导入其他需要的插件...

export default class ClassicEditor extends ClassicEditorBase {}

ClassicEditor.builtinPlugins = [
  Essentials,
  // 添加其他插件...
];

ClassicEditor.defaultConfig = {
  toolbar: {
    items: [
      'heading', '|',
      'bold', 'italic', 'link',
      'bulletedList', 'numberedList',
      'blockQuote', 'undo', 'redo'
    ]
  },
  language: 'en'
};

在main.ts中使用：

import ClassicEditor from './src/ckeditor';

ClassicEditor
  .create(document.querySelector('#app') as HTMLElement)
  .then(editor => {
    console.log('编辑器初始化完成', editor);
  })
  .catch(error => {
    console.error(error.stack);
  });

方法二：直接使用编辑器类

这种方法适合一次性使用的简单场景。

JavaScript版本

import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
// 导入其他需要的插件...

ClassicEditor
  .create(document.querySelector('#app'), {
    plugins: [
      Essentials,
      // 添加其他插件...
    ],
    toolbar: [
      'heading', 'bold', 'italic', 'link',
      'bulletedList', 'numberedList',
      'blockQuote', 'undo', 'redo'
    ]
  })
  .then(editor => {
    console.log(editor);
  })
  .catch(error => {
    console.error(error);
  });

TypeScript版本

import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
// 导入其他需要的插件...

ClassicEditor
  .create(document.querySelector('#app') as HTMLElement, {
    plugins: [
      Essentials,
      // 添加其他插件...
    ],
    toolbar: [
      'heading', 'bold', 'italic', 'link',
      'bulletedList', 'numberedList',
      'blockQuote', 'undo', 'redo'
    ]
  })
  .then(editor => {
    console.log(editor);
  })
  .catch(error => {
    console.error(error);
  });