Strip tags on pasting into a contenteditable DOM element

My aim is to strip all tags on pasting into a contenteditable DOM element. I’m using WordPress Front-end Editor which is a featured plugin that may graduate into the WordPress core.

When pasting content into the title editable region, the plugin currently strips tags onblur. This results in the formatting being visible until focus is lost (then tags are stripped out). For how this is current done, see:
https://github.com/avryl/wp-front-end-editor/blob/master/js/wp-front-end-editor.js#L118

Read More

I need the tags to be stripped out when pasting so that the copied styles and formatting aren’t displayed. I thought about using the paste event to strip tags on paste but am unsure exactly how to implement it.

I tried replacing 'blur' with 'paste' but that didn’t work.

Hoping somebody can help?

Related posts

Leave a Reply

1 comment

  1. Paste this after 117 line:

    .on('paste', function (e) {
        e.preventDefault();
        var contentOnBlur = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('Paste something..');
        contentOnBlur = contentOnBlur.replace(/(<([^>]+)>)/ig,'');
        document.execCommand('insertText', false, contentOnBlur);
    })
    

    Paste the same block after 171 line (don’t forget that the previous paste could move it lower).