jsFiddle: Cleaning Copy/Paste Input for ContentEditable

This is captured in an AngularJS directive, but the process could easily be bound with jQuery instead and follow the same steps. The basics here are to stop the default paste, read the paste data as plain text, and then to replace some risky characters (necessary for my exact use case).

As noted, this example has been built for and tested in Chrome only - I know for IE, you need to potentially handle a different getData() operation.

 

Comments

dinesh's Gravatar hii... i need a solution for the below case,,
while copying and pasting a content i should have all the formatting on the text as in its original page.. bt it shouldnt paste images
Jon Hartmann's Gravatar Hello Dinesh - I'd recommend using a library like StripTags:

https://www.npmjs.com/package/striptags

That library allows you to specify allowed tags that should be copied over. This would let you leave in bold and strong tags while pulling out images. Unfortunately, I'm not sure you can guarantee that the formatting is exactly the same depending on the source you are pasting from into the editable HTML, due to differences in the systems, but you should be able to maintain some of the formatting.
Comments are not allowed for this entry.
Jon Hartmann, July 2011

I'm Jon Hartmann and I'm a Javascript fanatic, UX/UI evangelist and former ColdFusion master. I blog about mysterious error messages, user interface design questions, and all things baffling and irksome about programming for the web.

Learn more about me on LinkedIn.