快速入门

CKEditor 5 是一个功能强大的富文本编辑器，您可以将其嵌入到您的 Web 应用程序中。本指南将向您展示开始使用它的最快方法。

您可以选择几种方法

使用 CKEditor 5 Builder 以获得最流畅的设置，包括实时预览和多种集成选项。
使用 npm，您将使用 JavaScript 包并使用捆绑器构建编辑器。
使用 CDN，您将在无构建设置中使用我们云分发的 CDN。
使用 ZIP 文件，您将下载可立即运行的文件并将它们复制到您的项目中。
选择与流行框架的预制集成之一（有关详细信息，请参阅目录）。

CKEditor 5 Builder

在我们的交互式 Builder 中，您可以快速体验 CKEditor 5。它提供易于使用的用户界面，可帮助您配置、预览和下载适合您需求的编辑器。您可以轻松选择

编辑器类型。
您需要的功能。
首选框架（React、Angular、Vue 或 Vanilla JS）。
首选分发方法。

最后，您将获得根据您的需求定制的可立即使用的代码！

查看我们的交互式 Builder

# 使用 npm 安装 CKEditor 5

要从 npm 设置编辑器，您需要一个捆绑器来正确构建 JavaScript 文件。CKEditor 5 与所有现代 JavaScript 捆绑器兼容。对于快速项目设置，我们建议使用 Vite。

首先，安装必要的软件包。以下命令将安装包含所有开源插件的主要 CKEditor 5 软件包。

npm install ckeditor5

现在，您可以从 ckeditor5 包中导入所有模块。此外，您必须单独导入 CSS 样式。请注意 Essentials 插件，其中包含所有基本编辑功能。

对于美式英语，导入和注册 UI 翻译是可选的。 要以任何其他语言使用编辑器，请使用导入的翻译，如设置部分所示。

import { ClassicEditor, Essentials, Bold, Italic, Font, Paragraph } from 'ckeditor5';

import 'ckeditor5/ckeditor5.css';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Essentials, Bold, Italic, Font, Paragraph ],
        toolbar: [
            'undo', 'redo', '|', 'bold', 'italic', '|',
            'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
        ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

将导入的插件在配置中传递给 create() 方法，并在适用的情况下添加工具栏项。

create() 函数中的第一个参数是用于放置编辑器的 DOM 元素，因此您需要将其添加到您的 HTML 页面。

<div id="editor">
    <p>Hello from CKEditor 5!</p>
</div>

这就是您在 Web 浏览器中看到一个简陋的编辑器运行所需的所有代码。

# 从 CDN 安装 CKEditor 5

CDN 是一种运行 CKEditor 5 的替代方法，您可以只需几个步骤即可开始使用。

您可以选择两种方式。您可以使用带有导入的 ES 模块构建或带有全局变量的 UMD 构建。前者比较现代，但后者与旧的开发环境具有更好的兼容性。

# 带有导入的 CDN

首先，添加指向编辑器样式表的链接。它包含编辑器 UI 和内容的所有样式。有关更多信息，请参阅内容样式指南。

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

然后，您需要附加带有 JavaScript 代码的脚本。为了简化导入，您可以使用浏览器中提供的功能——导入映射。它允许我们将易于记忆的说明符（如 ckeditor5）映射到 CDN 中文件的完整 URL。我们使用此浏览器功能在插件之间共享编辑器引擎代码。

<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>

添加导入映射后，您可以使用 ckeditor5 说明符访问编辑器及其插件。

您必须在本地服务器上运行代码才能使用导入映射。直接在浏览器中打开 HTML 文件将触发安全规则。这些规则（CORS 策略）确保从同一来源加载模块。因此，请设置本地服务器，如 nginx、caddy、http-server，以通过 HTTP 或 HTTPS 提供您的文件。

在以下脚本标签中，导入所需的插件，将它们添加到 plugins 数组中，并在适用的情况下添加工具栏项。请注意，两个脚本标签（此标签和上一个标签）都具有适当的 type 值。

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

    ClassicEditor
        .create( document.querySelector( '#editor' ), {
            plugins: [ Essentials, Bold, Italic, Font, Paragraph ],
            toolbar: [
                'undo', 'redo', '|', 'bold', 'italic', '|',
                'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
            ]
        } )
        .then( /* ... */ )
        .catch( /* ... */ );
</script>

最后，添加用于附加编辑器的标签。

<div id="editor">
    <p>Hello from CKEditor 5!</p>
</div>

您的最终页面应类似于以下页面。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CKEditor 5 - Quick start CDN</title>
        <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.3.0/ckeditor5.css" />
    </head>
    <body>
        <div id="editor">
            <p>Hello from CKEditor 5!</p>
        </div>

        <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,
                Essentials,
                Bold,
                Italic,
                Font,
                Paragraph
            } from 'ckeditor5';

            ClassicEditor
                .create( document.querySelector( '#editor' ), {
                    plugins: [ Essentials, Bold, Italic, Font, Paragraph ],
                    toolbar: [
                        'undo', 'redo', '|', 'bold', 'italic', '|',
                        'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
                    ]
                } )
                .then( /* ... */ )
                .catch( /* ... */ );
        </script>
    </body>
</html>

# 带有全局变量的 CDN

如果您更喜欢使用全局变量而不是 ES 模块，您可以使用 CDN 中的 UMD 构建。

首先，添加指向编辑器样式表的链接。它包含编辑器 UI 和内容的所有样式。有关更多信息，请参阅内容样式指南。

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

然后，添加带有 JavaScript 代码的脚本。它注册一个名为 CKEDITOR 的全局变量，您可以使用它来访问编辑器及其插件。

<script src="https://cdn.ckeditor.com/ckeditor5/43.3.0/ckeditor5.umd.js"></script>

在以下脚本标签中，从 CKEDITOR 对象中获取编辑器类和所需的插件，并将它们添加到 plugins 数组中。在适用的情况下添加工具栏项。

<script>
    const {
        ClassicEditor,
        Essentials,
        Bold,
        Italic,
        Font,
        Paragraph
    } = CKEDITOR;

    ClassicEditor
        .create( document.querySelector( '#editor' ), {
            plugins: [ Essentials, Bold, Italic, Font, Paragraph ],
            toolbar: [
                'undo', 'redo', '|', 'bold', 'italic', '|',
                'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
            ]
        } )
        .then( /* ... */ )
        .catch( /* ... */ );
</script>

最后，添加用于附加编辑器的标签。

<div id="editor">
    <p>Hello from CKEditor 5!</p>
</div>

您的最终页面应类似于以下页面。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CKEditor 5 - Quick start CDN</title>
        <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.3.0/ckeditor5.css" />
    </head>
    <body>
        <div id="editor">
            <p>Hello from CKEditor 5!</p>
        </div>

        <script src="https://cdn.ckeditor.com/ckeditor5/43.3.0/ckeditor5.umd.js"></script>

        <script>
            const {
                ClassicEditor,
                Essentials,
                Bold,
                Italic,
                Font,
                Paragraph
            } = CKEDITOR;

            ClassicEditor
                .create( document.querySelector( '#editor' ), {
                    plugins: [ Essentials, Bold, Italic, Font, Paragraph ],
                    toolbar: [
                        'undo', 'redo', '|', 'bold', 'italic', '|',
                        'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
                    ]
                } )
                .then( /* ... */ )
                .catch( /* ... */ );
        </script>
    </body>
</html>

# 从 ZIP 文件安装 CKEditor 5

如果您不想使用 npm 构建项目，也不能依赖 CDN 传递，您可以下载包含 CKEditor 5 及其所有插件的可立即运行的文件。

下载包含最新 CKEditor 5 发行版的 ZIP 存档。
将 ZIP 存档解压缩到项目中的专用目录（例如，vendor/）中。在目录名称中包含编辑器版本，以确保在安装新版本的 CKEditor 5 时能够正确地失效缓存。

ZIP 存档中包含的文件

index.html – 带有工作编辑器的示例。
ckeditor5/ckeditor5.js – 可立即使用的编辑器 ESM 捆绑包包含编辑器和所有插件。[推荐构建]
ckeditor5/ckeditor.js.map – 编辑器 ESM 捆绑包的源代码映射。
ckeditor5/ckeditor5.umd.js – 可立即使用的编辑器 UMD 捆绑包包含编辑器和所有插件。[辅助构建]
ckeditor5/ckeditor5.umd.js.map – 编辑器 UMD 捆绑包的源代码映射。
ckeditor5/*.css – 编辑器的样式表。在大多数情况下，您将使用 ckeditor5.css。有关其他文件的说明，请参阅编辑器和内容样式指南。
translations/ – 编辑器 UI 翻译（请参阅设置 UI 语言指南）。
README.md 和 LICENSE.md 文件。

查看编辑器运行的最简单方法是通过 HTTP 服务器提供 index.html 文件。

所有三种安装方法——npm、CDN、ZIP——的工作方式类似。因此，您也可以将 CKEditor 5 Builder 与 ZIP 存档结合使用。使用 Builder 创建自定义预设，并将其与从 ZIP 文件加载的编辑器结合使用。

# 安装高级功能

# 使用 npm 安装高级功能

所有高级功能都作为单独的软件包提供。您可以像安装开源软件包一样安装它。

npm install ckeditor5-premium-features

现在，您可以从 ckeditor5 和 ckeditor5-premium-features 软件包中导入所有模块。此外，您必须单独导入 CSS 样式。

import { ClassicEditor, Essentials, Bold, Italic, Paragraph, Font } from 'ckeditor5';
import { FormatPainter } from 'ckeditor5-premium-features';

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

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Essentials, Bold, Italic, Paragraph, Font, FormatPainter ],
        toolbar: [
            'undo', 'redo', '|', 'bold', 'italic', '|',
            'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', '|',
            'formatPainter'
        ],
        licenseKey: '<YOUR_LICENSE_KEY>'
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

将导入的插件在配置中传递给 create() 方法，并在适用的情况下添加工具栏项。请注意，要使用高级功能，您需要使用正确的许可证密钥激活它们，如本指南的最后一部分所述。

create() 函数中的第一个参数是用于放置编辑器的 DOM 元素，因此您需要将其添加到您的 HTML 页面。

<div id="editor">
    <p>Hello from CKEditor 5!</p>
</div>

这就是您在 Web 浏览器中看到一个简陋的编辑器运行所需的所有代码。

# 从 CDN 安装高级功能

与开源功能一样，您可以选择使用带有导入的 ES 模块构建或带有全局变量的 UMD 构建。但是，不应混合使用这些方法。您应该对开源功能和高级功能使用相同的方法。

# 带有导入的 CDN

首先，添加指向样式表的链接。它们包含编辑器 UI 和内容的所有样式。它们包含在两个单独的样式表中——一个用于开源插件，另一个用于高级插件。有关更多信息，请参阅内容样式指南。

<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" />

然后，您需要附加带有 JavaScript 代码的脚本。为了简化导入，您可以使用浏览器中提供的功能——导入映射。它允许您将易于记忆的说明符（如 ckeditor5）映射到 CDN 中文件的完整 URL。使用此浏览器功能在插件之间共享编辑器引擎代码。

<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>

添加导入映射后，您可以使用 ckeditor5 说明符访问编辑器及其插件。从 ckeditor5-premium-features 包中导入它们。请注意，要使用高级功能，您需要使用正确的许可证密钥激活它们，如本指南的最后一部分所述。

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

    ClassicEditor
        .create( document.querySelector( '#editor' ), {
            plugins: [ Essentials, Bold, Italic, Font, Paragraph, FormatPainter ],
            toolbar: [
                'undo', 'redo', '|', 'bold', 'italic', '|',
                'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', '|',
                'formatPainter'
            ],
            licenseKey: '<YOUR_LICENSE_KEY>'
        } )
        .then( /* ... */ )
        .catch( /* ... */ );
</script>

最后，添加用于附加编辑器的标签。

<div id="editor">
    <p>Hello from CKEditor 5!</p>
</div>

您的最终页面应类似于以下页面。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CKEditor 5 - Quick start CDN</title>
        <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.3.0/ckeditor5.css" />
        <!-- If you are using premium features: -->
        <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5-premium-features/43.3.0/ckeditor5-premium-features.css" />
    </head>
    <body>
        <div id="editor">
            <p>Hello from CKEditor 5!</p>
        </div>

        <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>

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

            ClassicEditor
                .create( document.querySelector( '#editor' ), {
                    plugins: [ Essentials, Bold, Italic, Font, Paragraph, FormatPainter ],
                    toolbar: [
                        'undo', 'redo', '|', 'bold', 'italic', '|',
                        'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', '|', 'formatPainter'
                    ],
                    licenseKey: '<YOUR_LICENSE_KEY>'
                } )
                .then( /* ... */ )
                .catch( /* ... */ );
        </script>
    </body>
</html>

# 带有全局变量的 CDN

首先，添加样式表链接。它们包含编辑器 UI 和内容的所有样式。这些样式包含在两个独立的样式表中——用于开源和高级插件。有关更多信息，请参阅内容样式指南。

<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" />

然后，添加带有 JavaScript 代码的脚本。它们注册名为 CKEDITOR 和 CKEDITOR_PREMIUM_FEATURES 的全局变量，您可以使用它们访问编辑器及其插件。

<script src="https://cdn.ckeditor.com/ckeditor5/43.3.0/ckeditor5.umd.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5-premium-features/43.3.0/ckeditor5-premium-features.umd.js"></script>

请注意，要使用高级功能，您需要使用正确的许可证密钥激活它们，如本指南的最后一节中所述。

在以下脚本标签中，从 CKEDITOR 和 CKEDITOR_PREMIUM_FEATURES 对象获取编辑器类和所需的插件，并将其添加到 plugins 数组中。在适用情况下添加工具栏项。

<script>
    const {
        ClassicEditor,
        Essentials,
        Bold,
        Italic,
        Font,
        Paragraph
    } = CKEDITOR;
    const { FormatPainter } = CKEDITOR_PREMIUM_FEATURES;

    ClassicEditor
        .create( document.querySelector( '#editor' ), {
            plugins: [ Essentials, Bold, Italic, Font, Paragraph, FormatPainter ],
            toolbar: [
                'undo', 'redo', '|', 'bold', 'italic', '|',
                'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', '|',
                'formatPainter'
            ],
            licenseKey: '<YOUR_LICENSE_KEY>'
        } )
        .then( /* ... */ )
        .catch( /* ... */ );
</script>

最后，添加用于附加编辑器的标签。

<div id="editor">
    <p>Hello from CKEditor 5!</p>
</div>

您的最终页面应类似于以下页面。

最终构建

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CKEditor 5 - Quick start CDN</title>
        <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" />
    </head>
    <body>
        <div id="editor">
            <p>Hello from CKEditor 5!</p>
        </div>

        <script src="https://cdn.ckeditor.com/ckeditor5/43.3.0/ckeditor5.umd.js"></script>
        <script src="https://cdn.ckeditor.com/ckeditor5-premium-features/43.3.0/ckeditor5-premium-features.umd.js"></script>

        <script>
            const {
                ClassicEditor,
                Essentials,
                Bold,
                Italic,
                Font,
                Paragraph
            } = CKEDITOR;
            const { FormatPainter } = CKEDITOR_PREMIUM_FEATURES;

            ClassicEditor
                .create( document.querySelector( '#editor' ), {
                    plugins: [ Essentials, Bold, Italic, Font, Paragraph, FormatPainter ],
                    toolbar: [
                        'undo', 'redo', '|', 'bold', 'italic', '|',
                        'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', '|', 'formatPainter'
                    ],
                    licenseKey: '<YOUR_LICENSE_KEY>'
                } )
                .then( /* ... */ )
                .catch( /* ... */ );
        </script>
    </body>
</html>

# 从 ZIP 文件安装高级功能

下载包含最新 CKEditor 5 分发版和高级功能的 ZIP 档案。
将 ZIP 存档解压缩到项目中的专用目录（例如，vendor/）中。在目录名称中包含编辑器版本，以确保在安装新版本的 CKEditor 5 时能够正确地失效缓存。

ZIP 档案中的文件

index.html – 带有工作编辑器的示例。
ckeditor5/ 目录
- ckeditor5.js – 可立即使用的编辑器 ESM 包含编辑器和所有插件。[推荐构建]
- ckeditor.js.map – 编辑器 ESM 包的源映射。
- ckeditor5.umd.js – 可立即使用的编辑器 UMD 包含编辑器和所有插件。[辅助构建]
- ckeditor5.umd.js.map – 编辑器 UMD 包的源映射。
- *.css – 编辑器的样式表，在大多数情况下使用 ckeditor5.css。阅读编辑器和内容样式指南中关于其他文件的说明。
- translations/ – 编辑器 UI 翻译（请参阅设置 UI 语言指南）。
- ckeditor5-premium-features/ 目录
- ckeditor5-premium-features.js – 高级功能的 ESM 包。[推荐构建]
- ckeditor5-premium-features.umd.js – 高级功能的 UMD 包包含编辑器和所有插件。[辅助构建]
- *.css – 高级功能的样式表。在大多数情况下，您将使用 ckeditor5-premium-features.css。
- translations/ – 高级功能的 UI 翻译。
README.md 和 LICENSE.md 文件。

查看编辑器运行的最简单方法是通过 HTTP 服务器提供 index.html 文件。

# 获取许可证密钥

要激活 CKEditor 5 高级功能，您需要商业许可证。最简单的方法是注册 CKEditor 高级功能 30 天免费试用以测试高级功能。

您也可以联系我们以接收满足您需求的报价。要获取激活密钥，请遵循许可证密钥和激活指南。

# 下一步

查看获取和设置数据指南，了解如何操作编辑器的数据。
参考设置部分中的其他指南，了解如何进一步自定义您的编辑器。
查看功能类别以详细了解各个功能。

我们每天都在努力使我们的文档保持完整。您是否发现过时的信息？是否缺少某些内容？请通过我们的问题跟踪器报告它。

随着版本 42.0.0 的发布，我们重写了大部分文档以反映新的导入路径和功能。我们感谢您的反馈，帮助我们确保文档的准确性和完整性。