基于CKEditor5的格式化插件

发表于 更新于 分类于

前言

写该文的起因是为了向大家介绍下基于CKEditor5 开发格式刷插件的思路

实现功能

  • 实现了文字与段落的属性Copy
    image

思路

  • 获取选中元素的 attribute 将其存起来
  • 再次选中时将选中元素的 attribute 通过存起来的属性值将其重置（当然重置可以采用removeFormat插件将元素格式移除）
    • 当然选中的元素需要判别下文字用文字的方法，段落用段落的方法
      image
  • 关于按钮的开启状态可以通过isEnable去设置，通过插件的refresh去刷新开启状态！（P.s 当然这是我们这边的业务工需求，大家可以按实际的业务需求来做）
  • UI 层的话就直接使用默认的 Button 按钮就好，监听下buttonView 然后执行execute
  • 文档

一些实际代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/**
 * 判断是否可以开启
 */
_checkEnabled() {
  const { model } = this.editor;
  const { schema } = model;
  const selectedElements = Array.from(
    this._getNotFormattingItems(model.document.selection, schema)
  );
  const flag = selectedElements.some((item) => item.is("textProxy") || item.is("text"));
  return flag;
}


/**
 * 获取不可以参与格式化的元素
 */
* _getNotFormattingItems(selection, schema) {
  // Check formatting on selected items that are not blocks.
  for (const curRange of selection.getRanges()) {
    for (const item of curRange.getItems()) {
      if (!schema.isBlock(item)) {
        yield item;
      }
    }
  }

  // Check formatting from selected blocks.
  for (const block of selection.getSelectedBlocks()) {
    if (block) {
      yield block;
    }
  }

  // Finally the selection might be formatted as well, so make sure to check it.
  if (selection) {
    yield selection;
  }
}