以经典编辑器和文档编辑器为例。
多类型的编辑器,其实就只需要把握2点就行
- 在ckeditor.js导出编辑器时,同时导出2个编辑器类
- webpack.conf.js 文件中修改library
1.使用多编辑器类
import { DecoupledEditor as DecoupledEditorBase } from '@ckeditor/ckeditor5-editor-decoupled' // 解耦编辑器
import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
... // 省略部分导入
class DecoupledEditor extends DecoupledEditorBase {}
class ClassicEditor extends ClassicEditorBase {}
// 文档编辑器
DecoupledEditor.builtinPlugins = [
LineHeight,
Autoformat,
Alignment,
]
DecoupledEditor.defaultConfig = {
toolbar: {
items: [
'undo', 'redo',
'|',
'showBlocks', 'findAndReplace', 'selectAll',
},
language: 'zh-cn',
}
// 经典编辑器
ClassicEditor.builtinPlugins = [
LineHeight,
Autoformat,
Alignment,
]
ClassicEditor.defaultConfig = {
toolbar: {
items: [
'heading',
'htmlEmbed',
]
},
language: 'zh-cn',
}
export default {
DecoupledEditor,
ClassicEditor,
}
2. 修改webpack配置
...
output: {
// The name under which the editor will be exported.
library: 'CKEDITOR', // 默认下载下来,此处是ClassicEditor,因为在ckeditor.js导出时名称已经使用,故修改
path: path.resolve( __dirname, 'build' ),
filename: 'ckeditor.js',
libraryTarget: 'umd',
libraryExport: 'default'
},
...
修改后,运行下列命令就OK了
npm run build
评论列表
已有0条评论