javascript - jQuery KendoEditor 不剥离粘贴的 HTML

Question

我有一个页面正在使用 KendoEditor 的实例。编辑器的功能应该非常有限，并且仅允许 strong、ul、li、ol 和 p 其内容内的 HTML 标记。每当我将整个网页粘贴到编辑器中时，它就会与该页面的所有 HTML 标签一起粘贴。

我尝试使用 KendoEditor 的 pasteCleanup 属性和正则表达式的组合来过滤这些内容，如下所示:

pasteCleanup: {
    css: true,
    span: true,
    msAllFormatting: true,
    msConvertLists: true,
    msTags: true,
    keepNewLines: true,
    custom: function (html) {
        return html.replace(/<\/?(?!strong)(?!ul)(?!li)(?!ol)(?!p)\w*\b[^>]*>/, "");
    }
},

但即使我在pasteCleanup上设置了all: true，这仍然保留span style="font-size: Something"、字体和标题(h1, h2 ...等)标签。我还尝试在 KendoEditor 的粘贴事件上手动解析它:

paste: function(e) {
  $(".text-editor").find("*").not("strong,ul,li,ol,p").each(function() {
    $(this).replaceWith(this.innerHTML);
  });
},

我尝试定位编辑器的 textarea 以及包含显示文本的 Iframe，但这绝对没有效果。我的假设是粘贴在内容渲染之前就会触发。我还尝试了 pasteCleanup 的所有组合，你可以想象其中一些 Prop 可能会相互冲突。有什么想法吗？

粘贴页面示例:https://html.nicole-wellinger.ch/schrift/txtgroesse.html

Answer 1

您忘记了一个小但重要的细节:JavaScript modifier g。您可能还需要考虑 i 不区分大小写。