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

guide(传统) 使用 Vite 从源代码集成

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

此场景允许您完全控制 CKEditor 5 的构建过程。这意味着您实际上不再使用构建，而是直接从源代码构建 CKEditor 到您的项目中。这种集成方法使您可以完全控制要包含哪些功能以及如何配置 Vite。

# 搭建 Vite 项目

首先，您需要初始化一个 Vite 项目。您可以为此目的使用官方的脚手架工具。

Vite 需要 Node.js 版本 14.18+、16+。但是，一些模板需要更高版本的 Node.js 才能运行，如果您的包管理器发出警告，请升级。

以下命令将在 ckeditor5-vite-example 文件夹中初始化一个基本的 Vite 模板。

npm create vite@latest ckeditor5-vite-example -- --template vanilla

npm 6 及更低版本不需要在上面的命令中添加额外的双破折号。

选择合适的 Vite 模板，以便在您的项目中使用 TypeScript。

npm create vite@latest ckeditor5-vite-example -- --template vanilla-ts

# 安装必要的依赖项

在初始化项目后，您可以开始安装软件包。从根本上说，在开始捆绑之前，您需要三件事

  • 一个编辑器基础
  • 编辑器插件
  • 编辑器主题

此示例将使用 Classic Editor 作为编辑器基础，并使用默认的 CKEditor 5 主题 lark。在插件方面，您可以使用任何您想要的。如果您需要灵感，您可以根据现有构建中的一个构建您的集成。在classic 构建的 package.json 文件中有一个软件包列表。所有软件包（不包括 @ckeditor/ckeditor5-dev-*）必须与基本编辑器软件包具有相同的版本。

您可以分别安装软件包，例如 npm install @ckeditor/ckeditor5-editor-classic，或从构建存储库复制依赖项，然后键入 npm install。一个插件示例列表可能如下所示

npm install --save @ckeditor/ckeditor5-theme-lark \
  @ckeditor/ckeditor5-autoformat \
  @ckeditor/ckeditor5-basic-styles \
  @ckeditor/ckeditor5-block-quote \
  @ckeditor/ckeditor5-editor-classic \
  @ckeditor/ckeditor5-essentials \
  @ckeditor/ckeditor5-heading \
  @ckeditor/ckeditor5-link \
  @ckeditor/ckeditor5-list \
  @ckeditor/ckeditor5-paragraph

# Vite 配置

当您的编辑器拥有所有必要的插件后，您可以继续与 Vite 集成。为此目的也存在一个官方插件。它处理从软件包和主题软件包加载 SVG 图标和样式。您可以通过以下命令安装它。

npm install --save @ckeditor/vite-plugin-ckeditor5

插件已安装，但尚不可用，因此您需要将其添加到 Vite 配置中。首先，在项目的根目录添加 vite.config.js 文件（或使用现有的文件）。然后，通过添加以下代码行修改文件。

// vite.config.js
import { createRequire } from 'node:module';
const require = createRequire( import.meta.url );

import { defineConfig } from 'vite';
import ckeditor5 from '@ckeditor/vite-plugin-ckeditor5';

export default defineConfig( {
    plugins: [
        ckeditor5( { theme: require.resolve( '@ckeditor/ckeditor5-theme-lark' ) } )
    ]
} );

现在您的设置已完成，您可以运行您的应用程序。

npm run dev

# 运行编辑器 - 方法 1

# JavaScript

现在您可以将所有需要的插件和配置导入到您的代码中。如果您使用 Vite 模板搭建了项目，请在 src 文件夹中添加 ckeditor.js 文件。然后，通过添加以下代码行修改文件。

// ckeditor.js

import { ClassicEditor as ClassicEditorBase } from '@ckeditor/ckeditor5-editor-classic';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
import { Heading } from '@ckeditor/ckeditor5-heading';
import { Link } from '@ckeditor/ckeditor5-link';
import { List } from '@ckeditor/ckeditor5-list';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';

export default class ClassicEditor extends ClassicEditorBase {}

ClassicEditor.builtinPlugins = [
    Essentials,
    Autoformat,
    Bold,
    Italic,
    BlockQuote,
    Heading,
    Link,
    List,
    Paragraph
];

ClassicEditor.defaultConfig = {
    toolbar: {
        items: [
            'heading',
            '|',
            'bold',
            'italic',
            'link',
            'bulletedList',
            'numberedList',
            'blockQuote',
            'undo',
            'redo'
        ]
    },
    language: 'en'
};

此模块将导出一个编辑器创建器类，该类已内置了所有您需要的插件和配置。要使用这样的编辑器，只需导入该类并像所有示例中那样调用静态 .create() 方法。然后，将 main.js 的内容替换为以下代码

// main.js

import ClassicEditor from './src/ckeditor';

ClassicEditor
    // Note that you do not have to specify the plugin and toolbar configuration — using defaults from the build.
    .create( document.querySelector( '#app' ) )
    .then( editor => {
        console.log( 'Editor was initialized', editor );
    } )
    .catch( error => {
        console.error( error.stack );
    } );

# TypeScript

如果您使用带有 TypeScript 的 Vite 模板搭建了项目，请在 src 文件夹中添加 ckeditor.ts 文件。然后，通过添加以下代码行修改文件。

// ckeditor.ts

import { ClassicEditor as ClassicEditorBase } from '@ckeditor/ckeditor5-editor-classic';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
import { Heading } from '@ckeditor/ckeditor5-heading';
import { Link } from '@ckeditor/ckeditor5-link';
import { List } from '@ckeditor/ckeditor5-list';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';

export default class ClassicEditor extends ClassicEditorBase {}

ClassicEditor.builtinPlugins = [
    Essentials,
    Autoformat,
    Bold,
    Italic,
    BlockQuote,
    Heading,
    Link,
    List,
    Paragraph
];

ClassicEditor.defaultConfig = {
    toolbar: {
        items: [
            'heading',
            '|',
            'bold',
            'italic',
            'link',
            'bulletedList',
            'numberedList',
            'blockQuote',
            'undo',
            'redo'
        ]
    },
    language: 'en'
};

然后，您可以使用已配置的编辑器。将 main.ts 的内容替换为以下代码。

// main.ts

import ClassicEditor from './src/ckeditor';

ClassicEditor
    // Note that you do not have to specify the plugin and toolbar configuration — using defaults from the build.
    .create( document.querySelector( '#app' ) as HTMLElement )
    .then( editor => {
        console.log( 'Editor was initialized', editor );
    } )
    .catch( error => {
        console.error( error.stack );
    } );

# 运行编辑器 - 方法 2

# JavaScript

运行编辑器的第二个变体是直接使用创建器类，而无需创建中间子类。上面的代码将转换为

// main.js

import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
import { Heading } from '@ckeditor/ckeditor5-heading';
import { Link } from '@ckeditor/ckeditor5-link';
import { List } from '@ckeditor/ckeditor5-list';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';

ClassicEditor
    .create( document.querySelector( '#app' ), {
        // The plugins are now passed directly to .create().
        plugins: [
            Essentials,
            Autoformat,
            Bold,
            Italic,
            BlockQuote,
            Heading,
            Link,
            List,
            Paragraph,
        ],

        // So is the rest of the default configuration.
        toolbar: [
            'heading',
            'bold',
            'italic',
            'link',
            'bulletedList',
            'numberedList',
            'blockQuote',
            'undo',
            'redo'
        ]
    } )
    .then( editor => {
        console.log( editor );
    } )
    .catch( error => {
        console.error( error );
    } );

# TypeScript

您也可以使用 TypeScript 翻译上面的代码。

// main.ts

import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
import { Heading } from '@ckeditor/ckeditor5-heading';
import { Link } from '@ckeditor/ckeditor5-link';
import { List } from '@ckeditor/ckeditor5-list';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';

ClassicEditor
    .create( document.querySelector( '#app') as HTMLElement, {
        // The plugins are now passed directly to .create().
        plugins: [
            Essentials,
            Autoformat,
            Bold,
            Italic,
            BlockQuote,
            Heading,
            Link,
            List,
            Paragraph,
        ],

        // So is the rest of the default configuration.
        toolbar: [
            'heading',
            'bold',
            'italic',
            'link',
            'bulletedList',
            'numberedList',
            'blockQuote',
            'undo',
            'redo'
        ]
    } )
    .then( editor => {
        console.log( editor );
    } )
    .catch( error => {
        console.error( error );
    } );

# 构建

最后，您可以构建您的应用程序。如果您没有使用搭建的模板，请将包含编辑器的脚本导入到 index.html 中。在您的项目上运行 Vite（通过键入 npm run dev），富文本编辑器将成为其中的一部分。