prevent contenteditable mode from creating <span> tags prevent contenteditable mode from creating <span> tags google-chrome google-chrome

prevent contenteditable mode from creating <span> tags


The problem is, actually, that not only it inserts span's and p's, but if you happen to copy a table it will insert the whole table with tbody and rows there.So, the only option to handle this that I've found working for me is this:

$(document).on("DOMNodeInserted", $.proxy(function (e) {        if (e.target.parentNode.getAttribute("contenteditable") === "true") {            with (e.target.parentNode) {                replaceChild(e.target.firstChild, e.target);                normalize();            }        }}, this));

Yes, it somewhat affects the overal page performance, but it blocks inserting tables and stuff into the contenteditables.

UPDATE:
The script above handles only basic cases, when the content you wish for is wrapped in one level of span/p tags. However, if you copy from, say, Word, you may end up copying even the whole tables.So, here is the code that handles everything i've thrown at it so far:

$(document).on("DOMNodeInserted", $.proxy(function (e) {    if (e.target.parentNode.getAttribute("contenteditable") === "true") {        var newTextNode = document.createTextNode("");        function antiChrome(node) {            if (node.nodeType == 3) {                newTextNode.nodeValue += node.nodeValue.replace(/(\r\n|\n|\r)/gm, "")            }            else if (node.nodeType == 1 && node.childNodes) {                    for (var i = 0; i < node.childNodes.length; ++i) {                        antiChrome(node.childNodes[i]);                    }            }        }        antiChrome(e.target);        e.target.parentNode.replaceChild(newTextNode, e.target);    }}, this));

Also, feel free to modify the regex in the middle any way you like to remove symbols that are particularly hazardous in your case.

UPDATE 2
After thinking for a little while and googling, I've just wrapped the code above into simple jQuery plugin to ease the usage. Here is the GitHub link


For now, I am using

        $(textObject).find('*').removeAttr('style');

upon deselect of the editable region.

It could also be used upon keyup.


Here is how I solved this

jquery remove <span> tags while preserving their contents (and replace <divs> and <p>:s with <br>)

I preserve the text of all div, span and p tags, remove those tags, and substitute all div and p with a br. I do it on blur, optimal would be to do it on every keydown, but that is eating too much cpu since I have to loop through all these %#¤¤%& (you said it) nested elements.