CKEditor系列之环境搭建

花开花落花中妖
847 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

背景

前段时间有幸接触到了有关新一代云office文档的开发，经过一些列的调研最终采用了基于CKEditor的二次开发。说到这里不得不吐槽一下，有关CKEditor5的社区资源是真的少，官方文档对新手也不是很友好。经过一段时间的摸索，终于顺利上手，初步可以进行一些插件的开发了。

构建配置

CKEditor5官方提供了一套用于构建的webpack配置 (【传送门】)，但是对于开发调试来说不是很方便：每次都需要凭感觉开发完成，然后构建出编译出资源，然后才能进行效果查看。

对此，我基于官方的webpack进行了扩展，实现了测试环境代码热更新。

  1. 添加 webpack.dev.js 配置
    ...
    module.exports = merge(common, {
      mode: 'development',
      devServer: {
        ...
      },
      plugins: [
        new HtmlWebpackPlugin({
          title: "CKEditor5",
          template: path.resolve(__dirname, '../index.html'),
        }),
      ],
    });
  1. 在 package.json 中添加测试环境启动命令
    "dev": "webpack server --config build/webpack.dev.js",
  1. 添加 html 模板文件
    <!DOCTYPE html>
    <html lang="en">

    <head>
      <meta charset="utf-8">
      <title>CKEditor5</title>
      <script src="./dist/CKEditor.js"></script>
      <script type="module">
        ...
      </script>
    </head>

    <body>
      <div class="document-editor__toolbar"></div>
      <div class="ck-toolbar"></div>
      <div id="editor"></div>
    </body>

    </html>

特殊说明

有关CKEditor插件（例如 @ckeditor/ckeditor5-essentials、@ckeditor/ckeditor5-paragraph、@ckeditor/ckeditor5-basic-styles等）的版本必须统一，否则导致编辑器报错无法正常使用。

建议进行插件安装的时候直接进行执行版本安装。

插件配置

1. 编辑器实例化

CKEditor5 提供了create方法，用来创建编辑器。该方法接收两个参数：sourceElementOrData、config。

  1. sourceElementOrData参数

如果sourceElementOrData传入的是Element，那么将自动创建编辑器，并将编辑器元素替换Element;如果sourceElementOrData传入的是初始化数据，那么将创建一个独立的编辑器，需要手动的将编辑器传入到DOM中。

  1. config 参数

构建编辑器的配置参数，比方说：工具栏、编辑器插件等。

下面我们以 ClassicEditor 类型编辑器为例，进行代码展示

    ClassicEditor
        .create( document.querySelector( '#editor' ) )
        .then( editor => {
            console.log( 'Editor was initialized', editor );
        })
        .catch( err => {
            console.error( err.stack );
        });

2. 工具栏配置

config参数有个属性是toolbar，就是用来配置显示在编辑器工具栏的工具，这里列举部分常用的功能：

  • heading：标题工具
  • bold：加粗工具
  • italic：倾斜工具
  • link：链接工具
  • bulletedList：无序列表
  • numberedList：有序列表
    ClassicEditor
        .create( 
            document.querySelector( '#editor' ), 
            {
                toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
            }
        );

工具栏的大致样式如下图：

image.png

3. 插件配置

CKEditor有个属性是builtinPlugins，用来配置编辑器的插件，这里列举一下部分常用插件，更多插件可前往CkEditor官网查看。

  • Autoformatting：自动格式化功能
  • BlockQuote：代码块功能
  • Table：表格功能
  • Pagination：分页功能
  • Images：图片相关功能
    ClassicEditor.builtinPlugins = [
      Alignment,
      Autoformat,
      BlockQuote,
      Bold,
      Essentials,
      FontBackgroundColor,
      FontColor,
      FontFamily,
      FontSize,
      Heading,
      Image,
      ImageCaption,
      ImageResize,
      ImageStyle,
      ImageToolbar,
      ImageUpload,
    ];

结语

有关CKEditor编辑配置的内容到这里基本就完结了，接下来我们将深入编辑器的使用和插件开发来展开。如果大家有想要了解的内容，欢迎在文章下方留言。

avatar
文章
阅读
粉丝