CKEditor5高级教程：在单页面中使用两种不同类型的编辑器

莫骅弘

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

阅读量415

点赞数 3

本文链接：https://blog.youkuaiyun.com/gitblog_00513/article/details/148416310

版权

CKEditor5高级教程：在单页面中使用两种不同类型的编辑器

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

前言

在现代化Web开发中，富文本编辑器的使用场景越来越多样化。有时我们需要在同一个页面中同时使用不同类型的CKEditor5编辑器，比如经典编辑器(Classic Editor)和内联编辑器(Inline Editor)的组合。本文将深入探讨如何正确实现这一需求，避免常见陷阱，并提供最佳实践方案。

常见误区与问题

许多开发者会尝试直接在页面中加载两个独立的CKEditor5构建版本，这种做法虽然看似简单，但实际上会带来一系列严重问题：

代码冗余问题：两个构建版本会重复加载99%的相同代码，包括核心JavaScript、CSS样式和SVG图标资源
样式冲突风险：重复的CSS可能导致编辑器界面显示异常
翻译系统混乱：国际化资源会被重复加载，可能导致翻译字符串显示错误

超级构建创建指南

1. 准备工作

首先需要准备一个基础构建环境。可以选择从经典编辑器构建开始：

yarn add @ckeditor/ckeditor5-build-classic

2. 添加额外编辑器类型

安装内联编辑器所需的包：

yarn add @ckeditor/ckeditor5-editor-inline

3. 修改构建配置

核心是修改src/ckeditor.ts文件，使其导出多个编辑器类。以下是关键修改点：

import { ClassicEditor as ClassicEditorBase } from '@ckeditor/ckeditor5-editor-classic';
import { InlineEditor as InlineEditorBase } from '@ckeditor/ckeditor5-editor-inline';

// 共享插件配置
const plugins = [
  Essentials,
  Bold,
  Italic,
  // 其他共享插件...
];

// 共享编辑器配置
const config = {
  toolbar: [...],
  // 其他共享配置...
};

class ClassicEditor extends ClassicEditorBase {}
class InlineEditor extends InlineEditorBase {}

// 应用配置到两个编辑器
ClassicEditor.builtinPlugins = plugins;
ClassicEditor.defaultConfig = config;

InlineEditor.builtinPlugins = plugins;
InlineEditor.defaultConfig = config;

// 导出多个编辑器
export {
  ClassicEditor,
  InlineEditor
};

4. 调整Webpack配置

修改webpack.config.js，将输出库名称改为更通用的形式：

module.exports = {
  output: {
    library: 'CKEDITOR', // 原来是'ClassicEditor'
    // 其他配置...
  }
};

5. 构建与测试

执行构建命令：

yarn build

然后在HTML页面中测试两种编辑器：

<script src="path/to/your/super-build.js"></script>
<script>
  // 使用经典编辑器
  CKEDITOR.ClassicEditor
    .create(document.querySelector('#classic-editor'))
    .catch(console.error);
  
  // 使用内联编辑器
  CKEDITOR.InlineEditor
    .create(document.querySelector('#inline-editor'))
    .catch(console.error);
</script>