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

guide从 DLL 构建迁移

DLL 是 webpack 特定的构建，它们在全局范围的变量 CKEditor5 中注册 CKEditor 5 及其插件。然后可以使用此变量来创建编辑器实例。

由于新的安装方法不依赖于全局变量，因此从 DLL 构建迁移到新的安装方法主要只是更改导入 CKEditor 5 及其插件的方式。

另一个显著差异是 DLL 使用 <script> 标签，而新的 CDN 构建使用 <script type="module"> 标签，它们在某些情况下表现不同。有关更多信息，请参阅此 MDN 页面，其中解释了模块和标准脚本之间的差异。

# 先决条件

在开始之前，请按照通常的升级路径将您的项目更新为使用最新版本的 CKEditor 5。这将排除可能因从旧版本编辑器升级而导致的任何问题。

# 迁移步骤

如果您使用的是 DLL 构建，请按照以下步骤操作

  1. 从您的项目中删除加载 CKEditor 5 DLL 构建的 <script> 标签。

  2. 添加 <link> 标签以包含编辑器的 CSS 文件，并添加 <script type="importmap"> 标签以将包名称映射到构建 URL。

    2.1 如果你只使用开源编辑器

    <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.3.0/ckeditor5.css" />

<script type="importmap">
{
    "imports": {
        "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.3.0/ckeditor5.js",
        "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.3.0/"
    }
}
</script>

    2.2 如果你还使用我们商业产品中的高级功能

    <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.3.0/ckeditor5.css" />
<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5-premium-features/43.3.0/ckeditor5-premium-features.css" />

<script type="importmap">
{
    "imports": {
        "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.3.0/ckeditor5.js",
        "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.3.0/",
        "ckeditor5-premium-features": "https://cdn.ckeditor.com/ckeditor5-premium-features/43.3.0/ckeditor5-premium-features.js",
        "ckeditor5-premium-features/": "https://cdn.ckeditor.com/ckeditor5-premium-features/43.3.0/"
    }
}
</script>

  3. 用 <script type="module"> 标签替换包含初始化代码的旧 <script> 标签。在其中，您可以从 ckeditor5 和 ckeditor5-premium-features 包中导入编辑器和插件，而不是依赖于全局 CKEditor5 变量。

    3.1 如果你只使用开源编辑器

    <script type="module">
import { ClassicEditor, Essentials, Bold, Italic, Paragraph } from 'ckeditor5';

ClassicEditor.create( document.querySelector( '#editor' ), {
    plugins: [ Essentials, Bold, Italic, Paragraph ],
    toolbar: [ /* ... */ ]
} );
</script>

    3.2 如果你还使用我们商业产品中的高级功能

    <script type="module">
import { ClassicEditor, Essentials, Bold, Italic, Paragraph, Mention } from 'ckeditor5';
import { SlashCommand } from 'ckeditor5-premium-features';

ClassicEditor.create( document.querySelector( '#editor' ), {
    plugins: [ Essentials, Bold, Italic, Paragraph, Mention, SlashCommand ],
    toolbar: [ /* ... */ ],
    licenseKey: '<LICENSE_KEY>',
} );
</script>

# 示例

以下是迁移前后编辑器配置的比较。

之前 
<script src="path/to/node_modules/ckeditor5/build/ckeditor5-dll.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-editor-classic/build/editor-classic.js"></script>
<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>
之后 
<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.3.0/ckeditor5.css" />

<script type="importmap">
{
    "imports": {
        "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.3.0/ckeditor5.js",
        "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.3.0/"
    }
}
</script>
<script type="module">
import {
    ClassicEditor,
    Autoformat,
    Bold,
    Italic,
    BlockQuote,
    Essentials,
    Heading,
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    Indent,
    Link,
    List,
    MediaEmbed,
    Paragraph,
    PasteFromOffice,
    Table,
    TableToolbar
} from 'ckeditor5';

const config = {
    plugins: [
        Autoformat,
        Bold,
        Italic,
        BlockQuote,
        Essentials,
        Heading,
        Image,
        ImageCaption,
        ImageStyle,
        ImageToolbar,
        ImageUpload,
        Indent,
        Link,
        List,
        MediaEmbed,
        Paragraph,
        PasteFromOffice,
        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'
        ]
    }
};

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