5

EDIT : NOT A DUPLICATE

Infact, the question marked as duplicate was even mentioned and linked here. The titles and purposes of the questions are completely different from each other. One of the answers of the other question, that could arguibly be used to answer this one, is there for a completely different reason (compatibility with IE) and could hardly be understood as an answer to this question.


ORIGINAL QUESTION

I got the following code from this Javascript trick for 'paste as plain text` in execCommand

I works as intended. It gives me plain text.

But while I would like to get rid of all text formatting, I would like to keep only the line breaks of the copied text? Is there a way to fix this code to achieve this behavior?

NOTE: As an example, it seems that the question editor where we write our question here on Stack Overflow works exactly like that. Gets rid of everything but the line breaks are respected.

// ALLOW TEXT ONLY ON PASTE
  function onPaste(e) {
    e.preventDefault();
    // GET TEXT REPRESENTATION OF CLIBOARD DATA
    const text = (e.originalEvent || e).clipboardData.getData('text/plain');
    // INSERT TEXT MANUALLY
    document.execCommand("insertHTML", false, text);
  }

SNIPPET

function onPaste(e) {
    e.preventDefault();
    // GET TEXT REPRESENTATION OF CLIBOARD DATA
    const text = (e.originalEvent || e).clipboardData.getData('text/plain');
    // INSERT TEXT MANUALLY
    document.execCommand("insertHTML", false, text);
}

document.getElementById("root").addEventListener("paste", onPaste);
#root {
  border: 1px dotted blue;
  
}
<div>Below is a contenteditable DIV</div>
<div id="root" contenteditable>

</div>

<div><br><br>Copy both paragraphs to the contenteditable div</div>
<p>First <b>Paragraph</b></p>
<p>Second Paragraph</p>
cbdeveloper
  • 27,898
  • 37
  • 155
  • 336
  • 1
    Can you knock up a snippet showing the issue.. – Keith Apr 15 '19 at 16:05
  • Try to show us an online demo via jsbin or jsfiddle – SaidbakR Apr 15 '19 at 16:08
  • @Keith just added a snippet. – cbdeveloper Apr 15 '19 at 16:12
  • @SaidbakR just added a snippet. – cbdeveloper Apr 15 '19 at 16:12
  • Change the `div` to a `pre` , also like `NineBerry` pointed out, `insertText` would be better, or you would end up converting `
    's into linebreaks too., when they might have been deliberate..
    – Keith Apr 15 '19 at 16:14
  • 1
    Worth noting, putting this into a content editable doesn't keep the linebreaks, it creates DIV's for each line..# – Keith Apr 15 '19 at 16:18
  • @LGSon but it mentions for a completely different reason: **"I couldn't get the accepted answer here to work in IE so I did some scouting around and came to this answer which works in IE11 and the latest versions of Chrome and Firefox."** – cbdeveloper Apr 15 '19 at 16:20
  • And do note, standard line breaks won't break line in an HTML element, unless its `white-space` is set to `pre`/`pre-line`/`pre-wrap` – Asons Apr 15 '19 at 16:26
  • @LGSon I have no doubt you have way more experience here on SO than me, but please take a look at this: [SO Help about duplicates](https://stackoverflow.com/help/duplicates) and that mentions this article [How I learned to stop worrying and love duplication](https://stackoverflow.blog/2010/11/16/dr-strangedupe-or-how-i-learned-to-stop-worrying-and-love-duplication/). – cbdeveloper Apr 15 '19 at 16:27
  • @LGSon "Furthermore, I’ve found that the perfect duplicate question is a … bit of a mythical beast. There are similar questions, yes, and so-called “exact” duplicates do happen, but they are kind of rare in my experience. It’s far more common to have many subtle variations of a question. I think that’s OK, because that’s how the world works." – cbdeveloper Apr 15 '19 at 16:28
  • @LGSon "Trying to shoehorn a bunch of semi-related things into one arbitrary container in service of some Highlander-ish “there can be only one” rule is ultimately harmful. Remember: while there are aspects of wiki to our system, we are not Wikipedia. There is not one canonical question about every possible subject. Rather, there are many." – cbdeveloper Apr 15 '19 at 16:28
  • @LGSon If you had closed my question before the answer I would still be stuck with my problem. Even though my question might be related to the one that you've marked as duplicated, it's not even by far **the exact same question**. By the way, I even mentioned it here. – cbdeveloper Apr 15 '19 at 16:30
  • @LGSon I did not complain about that one. This one here, though, I even mentioned and linked the question that you've marked as duplicate. That question was asking for `text/plain` and those answers are focused on that. I was in need of a way to keep the line breaks when pasting text (and somebody might need that someday). It is completely different. The `insertText` bit is mentioned there for a completely different reason. I could have never guessed (as I didn't) that it could be my answer. I feel that if it's not the exact same question, it should be put up for vote at least. – cbdeveloper Apr 15 '19 at 17:15
  • @LGSon I know you were trying to help. Even though I don't agree with you on this one, thank you for your time and help. – cbdeveloper Apr 15 '19 at 17:32
  • Added one more dupe link that could be useful, and deleted all my above comments as they didn't add anything to the post. – Asons Apr 15 '19 at 17:39

1 Answers1

7

Use the command insertText instead of the command insertHTML.

NineBerry
  • 26,306
  • 3
  • 62
  • 93