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集成到您的应用程序中，并且已经添加了一些自定义配置。