3

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

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?

henrywright
  • 9,235
  • 22
  • 77
  • 139

1 Answers1

2

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).

Dima Knivets
  • 2,107
  • 7
  • 25
  • 39
  • Thanks, although I can't quite work out how to integrate that solution into the plugin's wp-front-end-editor.js file (linked to above). When I replace lines 118 - 123 with the solution, tags aren't stripped at all. – henrywright Jan 13 '14 at 21:00
  • I think you don't need to replace. You should add this code separately from plugin. You need to attach this callback to the input where you past the content. – Dima Knivets Jan 13 '14 at 21:37
  • I'm trying to help out with the development of the plugin. The plugin author has asked for developers to help. Although I'm comfortable with PHP, my problem is the JavaScript side of things. – henrywright Jan 13 '14 at 21:42
  • Thanks for the update - I tried adding the solution before .on( 'blur', function() { but no success. The tags are stripped on blur but not on paste. – henrywright Jan 13 '14 at 21:53
  • I should add, I am using Chrome to test. The paste event is supported by all browsers so that shouldn't make a difference. – henrywright Jan 13 '14 at 21:54
  • Thanks again @dima-knivets. The updated answer works in Chrome. But I just tested in IE (version 10 if that's important?) and pasting doesn't do anything. i.e no content is inserted when I click paste. – henrywright Jan 13 '14 at 22:48
  • 1
    More complex logic must be implemented. I don't want to post the code, because, it will not fit nicely in your structure. I gave you the basic functionality and you should go from here. Here's the [link](http://stackoverflow.com/a/6804718/1491475) which describes in details how to implement the crossbrowsing solution (basically it's the same, just added additional logic for IE). – Dima Knivets Jan 13 '14 at 22:52
  • Thanks, +1 to your answer and thanks again for your help. I'll check out the cross browser solution to see if I can come up with something. – henrywright Jan 13 '14 at 22:59