Text with all the styling is being copied to the Editable textarea

Question

I have an editable div to post a blog on a web application, when user types anything then it is working fine, but whenever we I copy a paragraph or something from another website styling of that paragraph is also copied I just want that paragraph to be copied as plaintext without any styling. How can I do that.

If this is the code

<style>
        #mainDiv{
            width:300px;
            height:200px;
            border:1px solid rgb(200, 200, 200);
        }
    </style>

    <body>
        <div contenteditable="true" id="mainDiv" onblur="func()">  

        </div>
        <div id="anotherDiv">
        </div>
    </body>

<script>
    function func(){
        document.getElementById("anotherDiv").innerHTML=document.getElementById("mainDiv").innerHTML;
    }
</script>

and I copy and paste something from another website to the first div it is being displayed in the second div with all the styling applied to it. I just want it to be displayed as plaintext.

@GuruprasadRao if the paragraph I am copying has font size set to 20px then this will be displayed in the second div with font size:20px but I dont want that styling in the second div. — viveksinghggits, May 18 '16 at 13:25
**[`This would help`](http://stackoverflow.com/a/6804718/2065039)** — Guruprasad J Rao, May 18 '16 at 13:34

score 1 · Answer 1 · answered May 18 '16 at 13:28

1

You could always use Javascript to strip the html of tags before pasting.

Select the html into a variable.

Then use this handy replace piece of stripping Javascript I found on CSSTricks

 var StrippedString = OriginalString.replace(/(<([^>]+)>)/ig,"");

Might that do the job?

answered May 18 '16 at 13:28

Rachel Gallen

25,819
19
69
75

thats working fine, but is not what I am expecting..If I am replacing all the tags then if the user is not copying anything he is just writing something and wanted something in new line, all the conent will be displayed in the one line, which is not expected. Similarly if he want to make bold something he wontbe able to if i replace the tags. BTW thanks for the help Rachel – viveksinghggits May 18 '16 at 15:03
@viveksinghggits no problem, i guess it was worth a shot, but needs a bit of tweaking at the same time. Thanks for the upvote! – Rachel Gallen May 18 '16 at 15:05

score 1 · Answer 2 · answered May 18 '16 at 13:45

I think a simple solution might be to just use innerText instead of innerHTML, so your script would read:

<script>
function func(){
    document.getElementById("anotherDiv").innerText=document.getElementById("mainDiv").innerText;
}

Otherwise, the resource posted above using clipboard event listeners is probably your best bet. Hope this helps.

score 1 · Answer 3 · edited May 23 '17 at 12:31

If targeting newer browsers (chrome, edge) you can set the contenteditable attribute to plaintext-only as follows:

<div contenteditable="plaintext-only" id="mainDiv" onblur="func()">  

</div>

ref: https://w3c.github.io/editing/contentEditable.html

Alternatively the following answer is clean and intercepts the text directly from the clipboard. https://stackoverflow.com/a/12028136/1215026

Adapted to your code, it would be as follows (credit to pimvdb):

document.getElementById("mainDiv").addEventListener("paste", function(e) {
    e.preventDefault();
    var text = e.clipboardData.getData("text/plain");
    document.execCommand("insertHTML", false, text);
});

Essentially intercepting the paste event and getting the data from the cliboard as plain text.

Text with all the styling is being copied to the Editable textarea

3 Answers3