CKEditor5集成SVG Sprite为Widget的问题求助

1. 修复Inline Widget选中移动问题 #

代码中有两个关键错误导致Widget无法正常选中：

• inlineObjectElements元素名错误：
  原代码中this.editor.editing.view.domConverter.inlineObjectElements.push('svgSprite');是错误的，inlineObjectElements需要添加视图层元素名（即svg），而非模型层的svgSprite。修改为：

  this.editor.editing.view.domConverter.inlineObjectElements.push('svg');
  

• toWidget未指定inline参数：
  由于模型元素svgSprite标记为isInline: true，转换为Widget时必须明确设置inline: true，否则会被当作块级Widget处理，无法在文本流中选中移动。修改editingDowncast中的svgSprite转换逻辑：

  conversion.for('editingDowncast').elementToElement({
    model: 'svgSprite',
    view: (modelElement, { writer: viewWriter }) => {
      const viewElement = viewWriter.createContainerElement('svg', modelElement.getAttributes());
      viewElement._addClass('ck-widget-svgicon');
      // 添加inline参数匹配模型的inline属性
      return toWidget(viewElement, viewWriter, { 
        label: 'SVG icon widget',
        inline: true 
      });
    }
  });
  

2. 修复SVG在编辑视图中不显示的问题 #

CKEditor编辑视图的默认样式会影响SVG渲染，需要添加自定义样式确保图标正常显示：
在插件的init方法中添加样式规则：

init() {
  this._defineSchema();
  this._defineConverters();
  
  // 强制SVG显示样式
  const view = this.editor.editing.view;
  view.change(writer => {
    writer.addStyleRule(`
      svg.ck-widget-svgicon {
        display: inline-block !important;
        width: 1.2em;
        height: 1.2em;
        vertical-align: middle;
        fill: currentColor;
      }
    `);
  });
}

该样式会强制SVG以行内块级元素显示，并设置基础尺寸，确保图标能在编辑视图中正常渲染。

3. 额外验证点 #

• 检查<use>元素的href属性：通过浏览器开发者工具查看编辑视图中的<use>标签，确认href路径与预期一致，无被过滤或修改的情况。
• 按需调整isLimit属性：如果不需要将SVG作为编辑边界（禁止内部元素编辑），可以从svgSprite的schema定义中移除isLimit: true，减少潜在的编辑冲突。

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