如何调用TinyMCE公开方法实现类paste插件的HTML过滤供其他编辑器使用

TinyMCE 原生独立调用方案 #

TinyMCE 4及以上版本内置的tinymce.html.DomParser和tinymce.html.Serializer两个工具类可以脱离完整编辑器实例单独调用，完全复用原生过滤逻辑，和你给出的paste配置效果完全一致：

// 提前引入TinyMCE核心脚本，无需初始化编辑器
const validElements = 'b/strong,i/em';
const retainStyles = 'font-weight,font-style,font-size';

// 初始化解析器
const parser = tinymce.html.DomParser({
  valid_elements: validElements,
  valid_styles: {
    '*': retainStyles
  }
});
// 初始化序列化器
const serializer = tinymce.html.Serializer({
  valid_elements: validElements,
  valid_styles: {
    '*': retainStyles
  }
});

// 封装过滤方法
function filterHtml(rawHtml) {
  const root = parser.parse(rawHtml);
  return serializer.serialize(root);
}

调用该方法即可得到和TinyMCE paste过滤规则完全一致的干净HTML内容。

第三方轻量替代方案 #

如果不想引入TinyMCE依赖，可以使用专门的HTML过滤库实现相同效果，配置逻辑如下：

// 引入sanitize-html库
const sanitizeHtml = require('sanitize-html');

function filterHtml(rawHtml) {
  return sanitizeHtml(rawHtml, {
    allowedTags: ['b', 'strong', 'i', 'em'],
    allowedStyles: {
      '*': {
        'font-weight': [/.*/],
        'font-style': [/.*/],
        'font-size': [/.*/]
      }
    }
  });
}

该库无额外依赖，体积轻量，过滤逻辑灵活可扩展，完全满足需求。

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