ckeditor5 构建多类型编辑器

前端 2024-03-18 466

以经典编辑器和文档编辑器为例。

多类型的编辑器,其实就只需要把握2点就行

  1. 在ckeditor.js导出编辑器时,同时导出2个编辑器类
  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条评论