prevent contenteditable mode from creating tags

前端 未结 5 1279
别跟我提以往
别跟我提以往 2020-12-15 05:03

When I use the browser contenteditable=true on a div in order to let the user update the text in it, I run into this problem (using Chrome):

When using the delete

5条回答
  •  执念已碎
    2020-12-15 05:47

    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

提交回复
热议问题