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

guide(遗留) CKEditor 5 DLL 构建

⚠️ 我们更改了安装方法，此遗留指南仅供用户参考。如果您想详细了解这些更改，请参阅 从 DLL 构建迁移 指南。

DLL 构建的目的是允许在不重新构建（重新编译）构建本身的情况下将插件添加到编辑器构建中。

目前，两种最常见的集成方法包括

  • 使用预编译构建。这可以是官方构建之一，也可以是自定义构建。在这种情况下，添加插件需要重新编译整个构建。
  • 从源代码集成编辑器。在这种情况下，如果您要添加插件，则需要重新编译您的应用程序。

在某些高级用例中，无法限制可用插件的列表 - 应该能够在不访问 Node.js 的情况下添加插件。换句话说，插件应该与编辑器的核心分开构建（编译）。

这就是 DLL 构建派上用场的地方。

DLL 构建基于 DLL webpack 插件，该插件提供 CKEditor 5 基础 DLL 和一组 DLL 消费者插件。

CKEditor 5 带有可立即使用的 DLL 构建。这些构建已添加到 npm 包中，它们位于每个包的 /build 目录中。

为简单起见，本指南不包含任何协作功能。如果您有兴趣添加这些功能，请阅读本指南后查看 用于 CKEditor 5 协作功能的 DLL 构建 指南。

# DLL 构建的结构

编辑器的 DLL 构建由两部分组成

  • 基础 DLL 构建。它是一个单独的 JavaScript 文件，它组合了几个核心 CKEditor 5 包的内容：utils、core、engine、ui、clipboard、enter、paragraph、select-all、typing、undo、upload、widget 和 watchdog。这些包要么是框架核心，要么是几乎所有编辑器安装都会使用的功能。该构建在 npm 上的 ckeditor5 包中可用。
  • 与 DLL 兼容的包构建。每个不是基础 DLL 构建一部分的包都被构建到与 DLL 兼容的 JavaScript 文件中。这些 DLL 在 npm 上的 @ckeditor/ckeditor5-[FEATURE_NAME] 包中可用。

要加载编辑器，您需要使用基础 DLL 构建加上几个与 DLL 兼容的包构建。您将在后面看到如何执行此操作。

# 创建 DLL 构建

要创建您的基础 DLL 构建和与 DLL 兼容的包构建，您需要执行以下操作

  1. 从 npm 安装 ckeditor5 包。
  2. 为要包含在构建中的所有插件安装 @ckeditor/ckeditor5-* 包。

就是这样。

# 使用 DLL 构建

使用 DLL 构建的具体方法取决于您的系统。本指南介绍了最简单的方法，该方法使用 <script> 标签。

要运行编辑器，您需要加载必要的文件（基础 DLL + 编辑器创建器 + 功能）。这些文件使用以下格式在 CKEditor5 全局中公开其内容

CKEditor5.packageName.moduleName

例如

<!-- Base DLL build. -->
<!-- Note: It includes ckeditor5-paragraph too. -->
<script src="path/to/node_modules/ckeditor5/build/ckeditor5-dll.js"></script>

<!-- DLL-compatible build of ckeditor5-editor-classic. -->
<script src="path/to/node_modules/@ckeditor/ckeditor5-editor-classic/build/editor-classic.js"></script>

<!-- DLL-compatible builds of editor features. -->
<script src="path/to/node_modules/@ckeditor/ckeditor5-autoformat/build/autoformat.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-basic-styles/build/basic-styles.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-block-quote/build/block-quote.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-essentials/build/essentials.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-heading/build/heading.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-image/build/image.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-indent/build/indent.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-link/build/link.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-list/build/list.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-media-embed/build/media-embed.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-paste-from-office/build/paste-from-office.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-table/build/table.js"></script>

<script>
    const config = {
        plugins: [
            CKEditor5.autoformat.Autoformat,
            CKEditor5.basicStyles.Bold,
            CKEditor5.basicStyles.Italic,
            CKEditor5.blockQuote.BlockQuote,
            CKEditor5.essentials.Essentials,
            CKEditor5.heading.Heading,
            CKEditor5.image.Image,
            CKEditor5.image.ImageCaption,
            CKEditor5.image.ImageStyle,
            CKEditor5.image.ImageToolbar,
            CKEditor5.image.ImageUpload,
            CKEditor5.indent.Indent,
            CKEditor5.link.Link,
            CKEditor5.list.List,
            CKEditor5.mediaEmbed.MediaEmbed,
            CKEditor5.paragraph.Paragraph,
            CKEditor5.pasteFromOffice.PasteFromOffice,
            CKEditor5.table.Table,
            CKEditor5.table.TableToolbar
        ],
        toolbar: {
            items: [
                'heading',
                '|',
                'bold',
                'italic',
                'link',
                'bulletedList',
                'numberedList',
                '|',
                'outdent',
                'indent',
                '|',
                'uploadImage',
                'blockQuote',
                'insertTable',
                'mediaEmbed',
                'undo',
                'redo'
            ]
        },
        image: {
            toolbar: [
                'imageStyle:inline',
                'imageStyle:block',
                'imageStyle:side',
                '|',
                'toggleImageCaption',
                'imageTextAlternative'
            ]
        },
        table: {
            contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells'
            ]
        }
    };

    CKEditor5.editorClassic.ClassicEditor
        .create( document.querySelector( '#editor' ), config )
        .then( editor => {
            window.editor = editor;
        } );
</script>

# 实时实现示例

下面展示了一个使用 DLL 机制的有效工作示例编辑器。观察源代码，然后单击“结果”切换到工作 CKEditor 5 实例的实时视图。

# 本地化

所有 DLL 构建都使用默认（英语）翻译文件。但是，可以轻松配置编辑器的本地化版本。

基础 DLL 构建会为几个核心包生成翻译文件。与 DLL 兼容的包构建包含每个包的自己的翻译文件。

某些 CKEditor 5 功能不提供翻译文件，因为它们不提供 UI 元素或工具栏项。

要创建具有本地化 UI 的编辑器，您需要加载必要的翻译文件（类似于加载 DLL 构建）。

例如

<!-- Base DLL build. -->
<script src="path/to/node_modules/ckeditor5/build/ckeditor5-dll.js"></script>

<!-- DLL-compatible build of ckeditor5-editor-classic. -->
<script src="path/to/node_modules/@ckeditor/ckeditor5-editor-classic/build/editor-classic.js"></script>

<!-- DLL-compatible builds of editor features. -->
<script src="path/to/node_modules/@ckeditor/ckeditor5-autoformat/build/autoformat.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-basic-styles/build/basic-styles.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-block-quote/build/block-quote.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-essentials/build/essentials.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-heading/build/heading.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-image/build/image.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-indent/build/indent.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-link/build/link.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-list/build/list.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-media-embed/build/media-embed.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-paste-from-office/build/paste-from-office.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-table/build/table.js"></script>

<!-- Spanish translation files. -->
<script src="path/to/node_modules/ckeditor5/build/translations/es.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-basic-styles/build/translations/es.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-block-quote/build/translations/es.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-heading/build/translations/es.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-image/build/translations/es.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-indent/build/translations/es.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-link/build/translations/es.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-list/build/translations/es.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-media-embed/build/translations/es.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-table/build/translations/es.js"></script>

<script>
    const config = {
        // Use the Spanish language.
        language: 'es',
        // ...the rest of configuration object.
    };

    CKEditor5.editorClassic.ClassicEditor
        .create( document.querySelector( '#editor' ), config )
        .then( editor => {
            window.editor = editor;
        } );
</script>