要添加配置到
CKEditor 5 Decoupled Document Build中，您需要执行以下步骤：
1. 打开您的`webpack.config.js`文件，这是您的
CKEditor 5应用程序的配置文件。
2. 找到`module.exports`对象中的`module`属性，并在`rules`数组中添加以下代码：
```javascript
{
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`属性，并在其中添加以下代码：
```javascript
new
CKEditorWebpackPlugin({
language: 'en',
translationsOutputFile: /app[\\/]translations\.json$/,
additionalLanguages: 'all'
})
```
这将启用
CKEditor 5的语言支持，并生成翻译文件。
4. 找到您的`src`文件夹，然后在其中创建一个名为`
ckeditor.js`的文件。在该文件中，添加以下代码：
```javascript
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`属性，例如：
```html
<div id="editor"></div>
```
这将使编辑器显示在您的应用程序中。
现在，您已经成功地将
CKEditor 5 Decoupled Document Build集成到您的应用程序中，并且已经添加了一些自定义配置。
1156
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
