开发CKEditor插件为Drupal9图片添加内外边距不生效问题求助

问题原因 #

Drupal 9集成的CKEditor 4中，图片widget的内部<img>元素被标记为受保护的内部节点，普通的CKEDITOR.style API调用不会直接作用到该节点上，你之前尝试的几种写法要么目标元素匹配错误，要么样式仅作用到了widget外层容器上。

可行解决方案 #

你需要先获取选中的图片widget实例，再直接修改其内部img元素的样式属性，最后触发编辑器更新事件保证修改可被正常保存，实现代码如下：

// 获取当前选区的选中元素
const selection = editor.getSelection();
const selectedElement = selection.getSelectedElement();

// 校验选中元素是否为图片widget
if (selectedElement && editor.widgets.checkWidget(selectedElement) === 'image') {
  // 取到对应widget实例
  const imageWidget = editor.widgets.getByElement(selectedElement);
  // 取widget内部的img元素
  const imgElement = imageWidget.parts.image;
  
  // 直接给img设置margin样式，不会覆盖原有样式的写法可参考注释
  const originStyle = imgElement.getAttribute('style') || '';
  imgElement.setAttribute('style', `${originStyle} margin: 100px;`);
  // 需加padding的话直接在样式字符串里补充即可，比如`margin: 100px; padding: 20px;`

  // 触发编辑器更新事件，同步修改到Drupal表单值，避免保存时丢失
  editor.fire('change');
}

补充说明 #

你之前测试给p标签添加样式成功，是因为p属于普通可编辑元素，没有被widget机制保护，所以applyStyle方法可以正常作用。如果你的插件需要支持用户自定义边距数值，直接将代码中的固定100px替换为插件配置面板中用户输入的动态值即可。

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