CKEditor4中实现可选择select元素并保留选中状态的方法问询

核心方案 #

通过禁用编辑器的表单插件、保留原生交互区域、手动同步选中状态来实现需求：

1. 禁用CKEditor的表单编辑插件
   默认的forms插件会把select、复选框等表单元素转换成编辑器可编辑的部件，导致原生行为丢失。初始化编辑器时移除该插件：

CKEDITOR.replace('你的编辑器ID', {
  removePlugins: 'forms'
});

2. 用contenteditable="false"包裹表单元素
   插入select或复选框时，将其包裹在不可编辑的容器中，确保原生交互正常：

<!-- select示例 -->
<span contenteditable="false">
  <select name='xy'>
    <option value='1'>1</option>
    <option value='2' selected>2</option>
  </select>
</span>

<!-- 复选框示例 -->
<span contenteditable="false">
  <input type="checkbox" name="cb" checked> 选项1
</span>

3. 手动同步选中状态到DOM属性
   由于contenteditable="false"区域的DOM属性不会被CKEditor自动更新，需要监听元素的change事件，手动同步选中状态：

CKEDITOR.on('instanceReady', function(evt) {
  const editor = evt.editor;
  // 监听编辑器内表单元素的change事件
  editor.document.on('change', function(e) {
    const target = e.data.getTarget();
    
    // 处理select元素
    if (target.is('select')) {
      // 清除所有option的selected属性
      target.find('option').toArray().forEach(opt => opt.removeAttribute('selected'));
      // 给当前选中的option添加selected属性
      const selectedOpt = target.findOne('option:selected');
      if (selectedOpt) selectedOpt.setAttribute('selected', 'selected');
    }
    
    // 处理复选框
    else if (target.is('input[type=checkbox]')) {
      target.hasAttribute('checked') 
        ? target.setAttribute('checked', 'checked')
        : target.removeAttribute('checked');
    }
  });
});

4. 配置编辑器允许相关内容
   确保CKEditor不会过滤掉所需的标签和属性，添加如下配置：

CKEDITOR.config.allowedContent = 'span[contenteditable]; select[name,value]; option[value,selected]; input[type,checked]';

效果验证 #

完成以上配置后：

• 编辑器内的文本区域可正常编辑
• select和复选框保留原生选择/勾选行为
• 调用editor.getData()时，返回的HTML会包含当前选中的selected或checked属性，可直接用于生成PDF

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