CODEWITHSUNDEEP
javascript
sveti petar
sveti petar

Reputation: 3787

Copy content of rich editor using Javascript

I have a rich text editor on my page, specifically this one:

https://github.com/davidroyer/vue2-editor

I need to copy the content of this editor into a different rich text editor on a different website.

I can do this manually, by selecting the content of the editor and copying it. When I paste into the target editor, I get the correct outcome: the text is formatted just like in the original editor, including links etc.

The problem is, I need to do the same using a "copy to clipboard" button. I have tried using this on the editor element directly:

editor.select();
document.execCommand("copy");

...but nothing ends up in the clipboard. I have tried putting the content into a regular input element and then doing the same thing above from that, but then when I paste in the target editor I get the raw HTML instead of the formatted text.

In short, if the content editor is this...

One line

Two lines

...I need it to paste into the target (I reiterate, on a different website) like this...

One line

Two lines

...and not like this:

<p>One line</p><p>Two lines</p>

Upvotes: 0

Views: 962

Answers (1)

Zachiah
Zachiah

Reputation: 2627

I've been working on this for a while, and I finally got it! The vue2-editor uses a contenteditable div for it's text editor. This is why you can't use the .select() method. Use

console.log("selecting");
const e = document.querySelector("#app .ql-editor");
const textNode = e.childNodes[0];
const r = document.createRange();
const startIndex = 0;
r.setStart(e, startIndex);
r.setEnd(e, e.children.length);
const s = window.getSelection();
s.removeAllRanges();
s.addRange(r);
document.execCommand("copy")

I'm not a vue expert that's why I'm not using refs, I'm sure you should here is an example that shows what I mean.

Upvotes: 4

Related Questions