CKEditor 生态系统文档
Search
Contribute to this guide
主页/CKEditor 5/入门

guide(旧版) 使用两个不同的编辑器

⚠️ 我们更改了安装方法，此旧版指南是为了方便用户保留的。如果您想了解有关这些更改的更多信息，请参阅迁移到新的安装方法指南。

在一个页面上使用两种或多种类型的富文本编辑器是一种常见的需求。例如，您可能想要在几个内联编辑器旁边使用经典编辑器。

不要在一个页面上加载两个构建。这是一个会导致以下问题的错误

  • 代码重复。两个构建共享高达 99% 的代码，包括 CSS 和 SVG。通过加载两次，您会使您的页面变得不必要地繁重。
  • 重复的 CSS 可能导致冲突，从而导致编辑器的 UI 出现故障。
  • 翻译库会复制条目，这可能会导致加载错误的字符串和翻译。

# 解决方案

如果您想在一个页面上加载两个不同的编辑器，您需要确保它们一起构建（一次）。这可以通过至少两种方法实现

# 创建“超级构建”

单个构建可以导出的编辑器类数量没有限制。默认情况下，官方构建只导出一个编辑器类。但是，它们可以轻松地导入更多。

您可以从在“创建自定义构建”指南中分叉（或复制）现有构建开始。假设您分叉并克隆了ckeditor5存储库，并且想要将InlineEditor添加到经典构建中

git clone -b stable git@github.com:<your-username>/ckeditor5.git
cd ckeditor5/packages/ckeditor5-build-classic
yarn install

现在是时候添加缺少的编辑器包并安装它了

yarn add -D @ckeditor/ckeditor5-editor-inline

安装完所有依赖项后，您需要修改src/ckeditor.ts文件，该文件目前只导出一个类。第一步是将所有插件和配置移动到变量中，以便两个编辑器都可以重用它们

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

// Other imports

class ClassicEditor extends ClassicEditorBase {}

const plugins = [
  // ...
]

const config = {
  // ...
}

ClassicEditor.builtinPlugins = plugins;
ClassicEditor.defaultConfig = config;

export {
  ClassicEditor
};

现在，您可以将InlineEditor类添加到文件中，为它添加相同的插件和配置，并导出它

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

// Other imports

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

const plugins = [
  // ...
];

// Editor configuration.
const config = {
  // ...
};

ClassicEditor.builtinPlugins = plugins;
ClassicEditor.defaultConfig = config;

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

export default {
  ClassicEditor,
+  InlineEditor
};

由于您现在导出了具有两种编辑器类型（ClassicEditor和InlineEditor）的对象，因此重命名全局变量ClassicEditor也是合理的。现在一个合适的名称可能是CKEDITOR。此变量在webpack.config.js中的output.library设置中定义

// webpack.config.js

module.exports = {
  output: {
-    library: 'ClassicEditor',
+    library: 'CKEDITOR',
        // ...

更改了src/ckeditor.ts和webpack.config.js文件后，现在是时候重建构建了

yarn build

最后，当 webpack 完成超级构建的编译后，您可以更改samples/index.html文件来测试两个编辑器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – super build</title>
    <style>
        body {
            max-width: 800px;
            margin: 20px auto;
        }
    </style>
</head>
<body>

<h1>CKEditor&nbsp;5 – super build</h1>

<div id="classic-editor">
    <h2>Sample</h2>

    <p>This is an instance of the classic editor build.</p>
</div>

<div id="inline-editor">
    <h2>Sample</h2>

    <p>This is an instance of the inline editor build.</p>
</div>

<script src="../build/ckeditor.js"></script>
<script>
    CKEDITOR.ClassicEditor
        .create( document.querySelector( '#classic-editor' ) )
        .catch( err => {
            console.error( err.stack );
        } );

    CKEDITOR.InlineEditor
        .create( document.querySelector( '#inline-editor' ) )
        .catch( err => {
            console.error( err.stack );
        } );
</script>

</body>
</html>