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

guide从自定义构建迁移

从自定义构建迁移到新的安装方法主要只需改变您导入 CKEditor 5 及其插件的方式。

无论您使用的是旧版在线构建器还是使用 webpack 或 Vite 从源代码创建自定义构建，新的安装方法都允许您使用任何捆绑器或 JavaScript 元框架来构建和运行编辑器。这意味着迁移完成后，如果您的项目已经使用其他捆绑器进行构建，您可以从项目中删除 CKEditor 特定的 webpack 或 Vite 设置。

目前，新的安装方法不支持 自定义 CKEditor 5 图标。此功能将在未来的版本中添加。

# 先决条件

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

# 迁移步骤

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

  1. 首先，卸载您在项目中安装的所有 CKEditor 5 包。这包括主 ckeditor5 包和您单独安装的任何其他插件。

    npm uninstall \
    @ckeditor/ckeditor5-adapter-ckfinder \
    @ckeditor/ckeditor5-alignment \
    @ckeditor/ckeditor5-autoformat \
    @ckeditor/ckeditor5-autosave \
    @ckeditor/ckeditor5-basic-styles \
    @ckeditor/ckeditor5-block-quote \
    @ckeditor/ckeditor5-ckbox \
    @ckeditor/ckeditor5-ckfinder \
    @ckeditor/ckeditor5-clipboard \
    @ckeditor/ckeditor5-cloud-services \
    @ckeditor/ckeditor5-code-block \
    @ckeditor/ckeditor5-core \
    @ckeditor/ckeditor5-easy-image \
    @ckeditor/ckeditor5-editor-balloon \
    @ckeditor/ckeditor5-editor-classic \
    @ckeditor/ckeditor5-editor-decoupled \
    @ckeditor/ckeditor5-editor-inline \
    @ckeditor/ckeditor5-editor-multi-root \
    @ckeditor/ckeditor5-engine \
    @ckeditor/ckeditor5-enter \
    @ckeditor/ckeditor5-essentials \
    @ckeditor/ckeditor5-find-and-replace \
    @ckeditor/ckeditor5-font \
    @ckeditor/ckeditor5-heading \
    @ckeditor/ckeditor5-highlight \
    @ckeditor/ckeditor5-horizontal-line \
    @ckeditor/ckeditor5-html-embed \
    @ckeditor/ckeditor5-html-support \
    @ckeditor/ckeditor5-image \
    @ckeditor/ckeditor5-indent \
    @ckeditor/ckeditor5-language \
    @ckeditor/ckeditor5-link \
    @ckeditor/ckeditor5-list \
    @ckeditor/ckeditor5-markdown-gfm \
    @ckeditor/ckeditor5-media-embed \
    @ckeditor/ckeditor5-mention \
    @ckeditor/ckeditor5-minimap \
    @ckeditor/ckeditor5-page-break \
    @ckeditor/ckeditor5-paragraph \
    @ckeditor/ckeditor5-paste-from-office \
    @ckeditor/ckeditor5-remove-format \
    @ckeditor/ckeditor5-restricted-editing \
    @ckeditor/ckeditor5-select-all \
    @ckeditor/ckeditor5-show-blocks \
    @ckeditor/ckeditor5-source-editing \
    @ckeditor/ckeditor5-special-characters \
    @ckeditor/ckeditor5-style \
    @ckeditor/ckeditor5-table \
    @ckeditor/ckeditor5-theme-lark \
    @ckeditor/ckeditor5-typing \
    @ckeditor/ckeditor5-ui \
    @ckeditor/ckeditor5-undo \
    @ckeditor/ckeditor5-upload \
    @ckeditor/ckeditor5-utils \
    @ckeditor/ckeditor5-watchdog \
    @ckeditor/ckeditor5-widget \
    @ckeditor/ckeditor5-word-count \
    @ckeditor/ckeditor5-ai \
    @ckeditor/ckeditor5-case-change \
    @ckeditor/ckeditor5-collaboration-core \
    @ckeditor/ckeditor5-comments \
    @ckeditor/ckeditor5-document-outline \
    @ckeditor/ckeditor5-export-pdf \
    @ckeditor/ckeditor5-export-word \
    @ckeditor/ckeditor5-format-painter \
    @ckeditor/ckeditor5-import-word \
    @ckeditor/ckeditor5-list-multi-level \
    @ckeditor/ckeditor5-pagination \
    @ckeditor/ckeditor5-paste-from-office-enhanced \
    @ckeditor/ckeditor5-real-time-collaboration \
    @ckeditor/ckeditor5-revision-history \
    @ckeditor/ckeditor5-slash-command \
    @ckeditor/ckeditor5-template \
    @ckeditor/ckeditor5-track-changes \
    ckeditor5 \
    ckeditor5-collaboration

  2. 接下来，安装 ckeditor5 包。此包包含编辑器和我们所有的开源插件。

    npm install ckeditor5

  3. (可选) 如果您使用的是我们商业产品的付费功能，您还应该安装 ckeditor5-premium-features 包。

    npm install ckeditor5-premium-features

  4. 打开您初始化编辑器的文件。然后，替换导入语句，以便从 ckeditor5 包导入编辑器和所有开源插件，以及从 ckeditor5-premium-features 包导入商业插件。

    import { ClassicEditor, Essentials, Bold, Italic, Paragrap, Mention } from 'ckeditor5';
import { FormatPainter, SlashCommand } from 'ckeditor5-premium-features';

  5. 在这些导入语句下方，添加编辑器和商业插件的 CSS 样式导入。

    import 'ckeditor5/ckeditor5.css';
import 'ckeditor5-premium-features/ckeditor5-premium-features.css';

# 示例

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

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

import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { CKFinderUploadAdapter } from '@ckeditor/ckeditor5-adapter-ckfinder';
import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
import { CKBox } from '@ckeditor/ckeditor5-ckbox';
import { CKFinder } from '@ckeditor/ckeditor5-ckfinder';
import { EasyImage } from '@ckeditor/ckeditor5-easy-image';
import { Heading } from '@ckeditor/ckeditor5-heading';
import { Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, PictureEditing } from '@ckeditor/ckeditor5-image';
import { Indent } from '@ckeditor/ckeditor5-indent';
import { Link } from '@ckeditor/ckeditor5-link';
import { List } from '@ckeditor/ckeditor5-list';
import { MediaEmbed } from '@ckeditor/ckeditor5-media-embed';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
import { PasteFromOffice } from '@ckeditor/ckeditor5-paste-from-office';
import { Table, TableToolbar } from '@ckeditor/ckeditor5-table';
import { TextTransformation } from '@ckeditor/ckeditor5-typing';
import { CloudServices } from '@ckeditor/ckeditor5-cloud-services';

export default class ClassicEditor extends ClassicEditorBase {
    static builtinPlugins = [
        Essentials,
        CKFinderUploadAdapter,
        Autoformat,
        Bold,
        Italic,
        BlockQuote,
        CKBox,
        CKFinder,
        CloudServices,
        EasyImage,
        Heading,
        Image,
        ImageCaption,
        ImageStyle,
        ImageToolbar,
        ImageUpload,
        Indent,
        Link,
        List,
        MediaEmbed,
        Paragraph,
        PasteFromOffice,
        PictureEditing,
        Table,
        TableToolbar,
        TextTransformation
    ];

    static defaultConfig = {
        toolbar: {
            items: [
                'undo', 'redo',
                '|', 'heading',
                '|', 'bold', 'italic',
                '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed',
                '|', 'bulletedList', 'numberedList', 'outdent', 'indent'
            ]
        },
        image: {
            toolbar: [
                'imageStyle:inline',
                'imageStyle:block',
                'imageStyle:side',
                '|',
                'toggleImageCaption',
                'imageTextAlternative'
            ]
        },
        table: {
            contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells'
            ]
        },
        language: 'en'
    };
}
之后 
import {
    ClassicEditor as ClassicEditorBase,
    Essentials,
    CKFinderUploadAdapter,
    Autoformat,
    Bold,
    Italic,
    BlockQuote,
    CKBox,
    CKFinder,
    EasyImage,
    Heading,
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    PictureEditing,
    Indent,
    Link,
    List,
    MediaEmbed,
    Paragraph,
    PasteFromOffice,
    Table,
    TableToolbar,
    TextTransformation,
    CloudServices
} from 'ckeditor5';

import 'ckeditor5/ckeditor5.css';

export default class ClassicEditor extends ClassicEditorBase {
    static builtinPlugins = [
        Essentials,
        CKFinderUploadAdapter,
        Autoformat,
        Bold,
        Italic,
        BlockQuote,
        CKBox,
        CKFinder,
        CloudServices,
        EasyImage,
        Heading,
        Image,
        ImageCaption,
        ImageStyle,
        ImageToolbar,
        ImageUpload,
        Indent,
        Link,
        List,
        MediaEmbed,
        Paragraph,
        PasteFromOffice,
        PictureEditing,
        Table,
        TableToolbar,
        TextTransformation
    ];

    static defaultConfig = {
        toolbar: {
            items: [
                'undo', 'redo',
                '|', 'heading',
                '|', 'bold', 'italic',
                '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed',
                '|', 'bulletedList', 'numberedList', 'outdent', 'indent'
            ]
        },
        image: {
            toolbar: [
                'imageStyle:inline',
                'imageStyle:block',
                'imageStyle:side',
                '|',
                'toggleImageCaption',
                'imageTextAlternative'
            ]
        },
        table: {
            contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells'
            ]
        },
        language: 'en'
    };
}