Wysiwyg编辑器粘贴内容配置需求：保留原格式但清除来源网站字体

不少主流WYSIWYG编辑器都能实现粘贴内容保留原有格式、仅清除字体相关样式的需求，以下是几种可行方案：

1. 用编辑器自带的选择性粘贴功能 #

• 像CKEditor、TinyMCE这类编辑器，本身就带选择性粘贴选项，用户粘贴时可以选「匹配目标格式」或者「保留格式但清除字体样式」。
• 你可以在编辑器的默认设置里开启这个模式，不用用户每次手动操作。

2. 自定义粘贴事件拦截处理 #

通过监听编辑器的粘贴事件，手动过滤掉字体相关的标签和样式，以TinyMCE为例：

tinymce.init({
  selector: '#editor',
  setup: function(editor) {
    editor.on('paste', function(e) {
      // 获取剪贴板里的HTML内容
      let clipboardContent = e.clipboardData.getData('text/html');
      // 移除<font>标签和所有字体相关的内联样式
      clipboardContent = clipboardContent.replace(/<font[^>]*>/g, '')
                                         .replace(/style="[^"]*(font-family|size|weight|style)[^"]*"/gi, '')
                                         .replace(/style=""/g, '');
      // 替换粘贴的内容
      e.preventDefault();
      editor.insertContent(clipboardContent);
    });
  }
});

• 核心是过滤掉<font>标签，以及内联样式里的font-family、font-size、font-weight、font-style这些属性。

3. 配置编辑器的内容过滤规则 #

很多编辑器有内容过滤插件，比如CKEditor的Advanced Content Filter，你可以设置规则允许保留的格式，禁用字体相关样式：

ClassicEditor
  .create(document.querySelector('#editor'), {
    allowedContent: {
      '$1': {
        // 允许所有标签，但禁止字体相关样式
        styles: '!font-family,!font-size,!font-weight,!font-style',
        attributes: true,
        classes: true
      }
    }
  })
  .catch(error => {
    console.error(error);
  });

4. 粘贴后统一清洗内容 #

如果前面的方法都不合适，还可以在粘贴完成后遍历编辑器内的元素，批量移除字体相关的样式和标签，同时保留段落、列表、粗体、斜体、链接这些格式。

内容的提问来源于stack exchange，提问作者Roddy P. Carbonell