CKEditor内联编辑器移除<a>标签data-target属性问题求助

我之前也碰到过CKEditor过滤自定义HTML属性的坑，这本质是它默认的内容过滤器（Content Filter）会移除它不识别的属性。给你几个实用的解决办法：

方法1：配置编辑器允许自定义data属性 #

这是最直接的方案，只需要在初始化内联编辑器时，通过extraAllowedContent参数告诉编辑器允许a标签携带data-toggle和data-target属性：

// 初始化内联编辑器时添加配置
CKEDITOR.inline('your-editor-element-id', {
  extraAllowedContent: 'a[data-toggle,data-target]'
});

如果是全局配置（想让所有编辑器实例都生效），可以修改CKEditor的config.js文件，添加同样的配置项：

CKEDITOR.editorConfig = function( config ) {
  // 其他配置...
  config.extraAllowedContent = 'a[data-toggle,data-target]';
};

这个配置会让编辑器保留你需要的两个data属性，不会再自动移除。

方法2：自定义插件快速插入模态框链接（适合频繁使用场景） #

如果你需要经常插入这种触发模态框的链接，可以写个极简插件，给编辑器加个专属按钮，点击后直接生成带正确属性的链接：

1. 在CKEditor的plugins目录下新建一个modallink文件夹，里面创建plugin.js：

CKEDITOR.plugins.add('modallink', {
  init: function(editor) {
    editor.addCommand('insertModalLink', {
      exec: function(editor) {
        var linkText = prompt('输入链接文本：');
        var modalId = prompt('输入模态框ID（比如#myModal）：');
        if (linkText && modalId) {
          var html = `<a data-toggle="modal" data-target="${modalId}" href="#" style="background: #c21313; color: white; text-decoration: none">${linkText}</a>`;
          editor.insertHtml(html);
        }
      }
    });
    editor.ui.addButton('ModalLink', {
      label: '插入模态框链接',
      command: 'insertModalLink',
      icon: 'link' // 可以自定义图标，这里用默认链接图标
    });
  }
});

2. 在编辑器配置里启用这个插件：

CKEDITOR.inline('your-editor-element-id', {
  extraPlugins: 'modallink',
  toolbar: [/* 其他按钮 */, 'ModalLink']
});

这样就能在编辑器工具栏里直接点击按钮插入符合要求的链接，不用手动写代码，还能避免过滤问题。

注意事项 #

• 如果你的编辑器配置里设置了allowedContent，要确保它没有覆盖extraAllowedContent的规则，或者直接在allowedContent里包含a[data-toggle,data-target]。
• 修改配置后记得清除浏览器缓存，避免旧配置生效。

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