点击CKEditor5插入元素右侧出现多余空元素问题求助

我在CKEditor5里插入按钮时，大部分功能都正常，但点击已插入按钮的右侧区域时，会自动生成一个多余的空按钮元素。截图显示出现了克隆的空按钮，代码里还发现存在⁠这类隐形ASCII字符。

当前插入按钮的核心代码如下：

editor.model.change(writer => {  
  const viewFragment = editor.data.processor.toView('<a href="' + value.url + '" class="btn btn-' + value.type.toLowerCase() + ' simple-button-plugin">' + value.text + '</a>');  
  const modelFragment = editor.data.toModel(viewFragment);  
  writer.model.insertContent(modelFragment);  
  writer.setSelection( editor.model.document.getRoot(), 'end' );
});

问题分析 #

这种情况大概率是HTML转模型时引入了隐形字符，或者光标定位逻辑不当，导致编辑器误判按钮后存在可编辑区域，触发了元素克隆机制。

解决方案 #

方案1：直接操作模型创建元素（推荐）

跳过HTML转译环节，直接在模型层创建按钮元素，避免隐形字符问题：

editor.model.change(writer => {
  // 创建自定义按钮模型元素（需提前在Schema中定义）
  const button = writer.createElement('simpleButton', {
    url: value.url,
    type: value.type.toLowerCase()
  });
  // 给按钮添加文本内容
  writer.append(writer.createText(value.text), button);
  // 将按钮插入文档
  writer.insert(button, editor.model.document.getRoot(), 'end');
  // 把光标定位到按钮的后方，而非文档末尾
  const positionAfterButton = writer.createPositionAfter(button);
  writer.setSelection(positionAfterButton);
});

注意：需要先在编辑器的Schema中注册simpleButton元素，配置允许它作为根节点的子元素，并且能包含文本内容。

方案2：修正现有转换逻辑

清理HTML中的隐形字符，同时调整光标定位：

editor.model.change(writer => {
  let buttonHtml = `<a href="${value.url}" class="btn btn-${value.type.toLowerCase()} simple-button-plugin">${value.text}</a>`;
  // 移除可能存在的非换行空格、零宽空格等隐形字符
  buttonHtml = buttonHtml.replace(/[\u00A0\u200B]/g, '');
  
  const viewFragment = editor.data.processor.toView(buttonHtml);
  const modelFragment = editor.data.toModel(viewFragment);
  
  writer.model.insertContent(modelFragment);
  
  // 定位光标到刚插入的按钮后方
  const insertedButton = modelFragment.firstChild;
  const position = writer.createPositionAfter(insertedButton);
  writer.setSelection(position);
});

方案3：检查编辑器插件配置

排查是否有自动格式化类插件（比如Autoformat）在干扰，或者在Schema中设置simpleButton为不可克隆、不可嵌套的元素，避免编辑器自动生成重复元素。

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