[SOLVED] jQuery KendoEditor not stripping pasted HTML

jQuery KendoEditor not stripping pasted HTML

I have a page where I am using an instance of a KendoEditor. The editor should have very limited functionality and allow only strong, ul, li, ol, and p HTML tags inside of its content. Whenever I paste a whole web page into the editor it gets pasted along with all HTML tags of that page.

I tried filtering these out using a mix of pasteCleanup attribute of KendoEditor and regular expressions like so:

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[^>]*>/, "");
    }
},

But even if I set all: true on pasteCleanup this still retains span style="font-size: something", font and headings (h1,h2 ...etc) tags. I also tried parsing it manually on paste event of KendoEditor:

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

I tried targetting both the textarea of the editor, as well as Iframe containing the displayed text but this has absolutely no effect. My assumption is that paste fires before the content even gets rendered. I also tried just about all the combinations of pasteCleanup you can imagine thinking that some of these props might conflict with one another. Any idea?

example pasted page: https://html.nicole-wellinger.ch/schrift/txtgroesse.html

Solution

You forgot about one little but important detail: The JavaScript modifier g. You might want to consider i for case insensitivity as well.