CKEditor5自定义命令：如何将合并符号拆分为独立<span>元素

嘿，我知道你遇到的这个问题——CKEditor总是把你插入的多个符号合并到同一个<span>里，这确实挺烦人的。其实核心原因是CKEditor的insertText在连续插入相同属性的文本时，会自动把它们合并成一个模型节点，最终渲染成单个<span>。要让每个符号单独占一个<span>，我们只需要打破这种自动合并的逻辑就行。

直接上修改后的代码 #

我调整了你的SymbolsCommand的execute方法，每次插入一个符号后就把插入位置移到刚插入的符号后面，这样每个符号都会被插入到新的位置，CKEditor就不会把它们合并了：

import Command from '@ckeditor/ckeditor5-core/src/command';

export default class SymbolsCommand extends Command {
  execute({ charButtons }) {
    const { model } = this.editor;
    model.change((writer) => {
      // 先获取初始的插入位置
      let currentPosition = model.document.selection.getFirstPosition();

      // 遍历每个要插入的符号
      charButtons.forEach(({ fontFamily, char }) => {
        // 插入当前符号到当前位置
        writer.insertText(char, { fontFamily }, currentPosition);
        // 把位置更新到刚插入的符号后面，确保下一个符号插在新位置
        currentPosition = writer.createPositionAfter(currentPosition.nodeAfter);
      });
    });
  }

  refresh() {
    this.isEnabled = true;
  }
}

为什么这样有效？ #

你原来的代码里，所有符号都往同一个初始position插入，CKEditor一看这些文本都用同一个fontFamily，就自动把它们合并成一个节点了。现在每次插完一个符号，我们就把插入位置往后挪一位，下一个符号就会被插在新的位置上，每个符号都变成独立的模型节点，最终渲染出来就是各自独立的<span>啦～

如果你的符号里有不同字体的，这个方法也完全适用——不同属性的文本本来就不会被合并，相同属性的因为插入位置分开了，也会各自成一个节点。

内容的提问来源于stack exchange，提问作者Pio