ckeditor5-build-decoupled-document

`ckeditor5-build-decoupled-document` 是一个基于 CKEditor 5 构建的分离式文档编辑器。它提供了一个模块化的、可扩展的架构，可以根据自己的需要选择和添加不同的插件和功能。与传统的 CKEditor 5 构建方式不同，`ckeditor5-build-decoupled-document` 使用了分离式编辑器的方法，将编辑器核心和 UI 界面分离开来，使得开发者可以更加轻松地根据自己的需求进行定制开发。

相关问题

ckeditor5-build-decoupled-document添加配置

要添加配置到CKEditor 5 Decoupled Document Build中，您需要执行以下步骤：

1. 打开您的`webpack.config.js`文件，这是您的CKEditor 5应用程序的配置文件。

2. 找到`module.exports`对象中的`module`属性，并在`rules`数组中添加以下代码：

{
    test: /\.css$/,
    use: ['style-loader', 'css-loader'],
    exclude: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/
},
{
    test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
    use: ['raw-loader']
},
{
    test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
    use: ['style-loader', 'css-loader'],
},
{
    test: /ckeditor5-[^/\\]+[/\\]theme[/\\]loader\.js$/,
    use: [
        {
            loader: 'style-loader',
            options: {
                injectType: 'singletonStyleTag',
                attributes: {
                    'data-cke': true
                }
            }
        },
        {
            loader: 'postcss-loader',
            options: styles.getPostCssConfig({
                themeImporter: {
                    themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
                },
                minify: true
            })
        }
    ]
}

这将允许您在Decoupled Document Build中使用CSS样式。

3. 找到`module.exports`对象中的`plugins`属性，并在其中添加以下代码：

new CKEditorWebpackPlugin({
    language: 'en',
    translationsOutputFile: /app[\\/]translations\.json$/,
    additionalLanguages: 'all'
})

这将启用CKEditor 5的语言支持，并生成翻译文件。

4. 找到您的`src`文件夹，然后在其中创建一个名为`ckeditor.js`的文件。在该文件中，添加以下代码：

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';

ClassicEditor.create(document.querySelector('#editor'), {
    plugins: [Essentials, Bold, Italic, Paragraph],
    toolbar: ['bold', 'italic']
})
    .then(editor => {
        console.log(editor);
    })
    .catch(error => {
        console.error(error);
    });

这将初始化ClassicEditor，并创建一个具有加粗和斜体工具栏按钮的编辑器。

5. 在您的应用程序中添加一个`<div>`元素，并为其指定一个`id`属性，例如：

<div id="editor"></div>

这将使编辑器显示在您的应用程序中。

现在，您已经成功地将CKEditor 5 Decoupled Document Build集成到您的应用程序中，并且已经添加了一些自定义配置。

ckeditor5-custom-build": “file:ckeditor5”

"ckeditor5-custom-build": "file:ckeditor5" 是一个 npm 包的依赖项，用于在自定义构建中引用本地文件中的ckeditor5模块。

这个配置允许我们从本地磁盘上的文件系统引用一个 CKEditor 5 模块。通常情况下，我们通过 npm 安装 CKEditor 5 模块并从 node_modules 文件夹引用它们。但是，在某些情况下，我们可能需要根据我们的特定需求进行自定义构建，并将本地文件作为模块引入。

为了使用 "file:ckeditor5"，我们需要满足以下步骤：

1. 在 CKEditor 5 项目根目录下创建一个名为 "ckeditor5" 的文件夹。

2. 在 "ckeditor5" 文件夹中添加所需的 CKEditor 5 模块文件。

3. 在项目的 package.json 文件中，将 "ckeditor5-custom-build" 的值设置为 "file:ckeditor5"。

通过以上配置，我们可以使用本地文件系统中的 CKEditor 5 模块。这使得我们能够根据项目的具体需求进行自定义构建并引用本地的模块文件。同时，它还提供了在项目中灵活地管理 CKEditor 5 模块的能力。

需要注意的是，使用 "file:ckeditor5" 需要确保文件路径的正确性，并且在导入模块时使用正确的名称和路径。此外，我们还应避免将本地文件提交到生产环境，以避免潜在的问题和安全风险。