JQuery Text Editor Paste Without Formatting

Question

I am using the plugin JQuery Text Editor on my site. Sometimes, when users copy and paste preformatted HTML text from another website into the plugin's textbox it will render incorrectly and break off part of the string. The broken text can be seen after retrieval from the database.

If you manually write this text, or copy it from the box and repaste it, it will appear fine.

I believe this is something to do with incorrect formatting for JQuery Text Editor.

I found this function below on Stack which looks like it would work:

document.querySelector("div[announcements_container]").addEventListener("paste", function(e) {
    e.preventDefault();
    var text = e.clipboardData.getData("text/plain");
    document.execCommand("insertHTML", false, text);
});

However, the problem is that when I use this code my JQuery Text Editor textbox breaks as seen below:

HTML for JQTE:

<textarea class="jqte" style="margin-bottom: -20px;" rows="50" cols="50" name="body" id="body"></textarea>

It usually looks like this:

Can anybody help me out? Thanks.

Answer 1

Hmm, your code snippet seems to work for me when I run this on the jqte demo page. It pastes unformatted text into the top box. Just in case, I changed our execCommand to insertText since that's what we want to anyway.

document.querySelector("div.jqte_green_editor").addEventListener("paste", function(e) {
    e.preventDefault();
    var text = e.clipboardData.getData("text/plain");

    document.execCommand("insertText", false, text);
});

Are you sure your selector of div[announcements_container] is correct? Maybe try div.announcements_container instead.