How to avoid WebKit contentEditable copy-paste resulting in unwanted CSS?

Tags: css,google-chrome,webkit,copy-paste,contenteditable

Problem :

I have a <div> that has contentEditable="true".

When I copy-paste content within the editable div, the pasted text gets wrapped into a lot of unwanted CSS.

For example, this: <p>text text</p> becomes:

<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 17px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">text text</p>

I understand the browser (Google Chrome in the current case) tries to be smart and all, but what I end up is completely irrelevant and unwanted CSS.

Is there any way to tell the WebKit-based browser not to generate this?

Solution :

I had the same problem, plus the problem that every browser creates different HTML. So I wrote a JavaScript port of the Sanitize library: Sanitize.js

Sanitize.js is a whitelist-based HTML sanitizer written in JavaScript. Given a list of acceptable elements and attributes, Sanitize.js will remove all unacceptable HTML from a DOM node.

Have a look at the example, where I capture the paste event and process the HTML afterwards.

    CSS Howto..

    How to set column width for DataTables

    How to show something only when user prints?

    How to make a curved triangle speech bubble with pseudo-elements?

    bootstrap css, how to make full width div inside container

    How do I change my link's image on click?

    How can I place rotated text against a table with HTML and CSS?

    How do I get a computed style?

    How can I remove frame like background in twentysixteen theme

    How to make sure one css file does not override another one?

    How to get css property of a DOM element server-side?

    How to make a button light up on hover with twitter bootstrap

    How to hide expand/collapse icon in vaadin treetable?

    How to make these jquery pop ups fall back to css when javascript disabled

    How to detect all events added on a div

    How would YOU do this: Tables or CSS? [closed]

    How to properly center a 100% width div in css

    How to make transition effect on css sprite hover

    how to add css on click and remove it when they click close button [closed]

    How to make float navbars with JS and CSS?

    html element h1 with links as background image show them in one line

    How can I make my wrapper
    vertically centered and responsive?

    How to fill in blank space using html and css

    How to override CSS in joomla template

    How to preload large css and javascript files in vanilla javascript

    How do I hide all children except the for the first child in Javascript/JQuery and CSS?

    How to animate X number of divs using CSS and javascript?

    CSS: how to add a down arrow for the active link

    How to Achieve Word Wrap Effect With Children Divs

    CSS: How to align text to the center of the image (left side)

    :hover feature , How to approach the same result as js code by using css