如何为CKEditor 4图片对话框添加可编辑自定义字段

问题根源 #

1. 缺少commit方法：之前的代码只实现了把数据加载到输入框的setup逻辑，但没有编写将输入内容保存到图片标签属性的代码，导致输入的内容无法同步到HTML中。
2. setup逻辑不全：编辑已有图片时，代码没有从<img>标签的extra属性读取已有值，所以打开对话框时输入框为空。

修改后的完整代码 #

CKEDITOR.on('dialogDefinition', function(ev) {
  var dialogName = ev.data.name;
  var dialogDefinition = ev.data.definition;

  if (dialogName == 'image') {
    for (var i in dialogDefinition.contents) {
      var contents = dialogDefinition.contents[i];

      if (contents.id == "info") {
        contents.elements.push({
          type: 'textarea',
          id: 'txtComments',
          label: 'רשימה - אחד בשורה',
          rows: 3,
          // 加载数据：编辑旧图读取extra属性，新增图用已有数据
          setup: function(data) {
            var value = '';
            if (data.element && data.element.is('img')) {
              value = data.element.getAttribute('extra') || '';
            } else {
              value = data.txtComments || '';
            }
            this.setValue(value);
          },
          // 保存数据：将输入值同步到img的extra属性
          commit: function(data) {
            var value = this.getValue().trim();
            if (data.element && data.element.is('img')) {
              if (value) {
                data.element.setAttribute('extra', value);
              } else {
                // 内容为空时移除属性，避免冗余代码
                data.element.removeAttribute('extra');
              }
            }
            // 同步到data对象，保证CKEditor内部数据一致
            data.txtComments = value;
          }
        });
      }
    }
  }
});

核心修改说明 #

• 新增commit方法：负责将输入框的内容同步到<img>标签的extra属性中，当输入内容为空时自动移除该属性；同时将值存入data对象，确保CKEditor内部数据流程一致。
• 补全setup逻辑：区分新增图片和编辑已有图片的场景，编辑时直接从图片标签的extra属性读取已有值实现回显，新增时使用data对象中的预设值（如果存在）。

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