时间戳

首页 > 解决方案 > 使用 Javascript 复制富编辑器的内容

javascript - 使用 Javascript 复制富编辑器的内容

问题描述

我的页面上有一个富文本编辑器，特别是这个：

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

我需要将此编辑器的内容复制到不同网站上的不同富文本编辑器中。

我可以通过选择编辑器的内容并复制它来手动执行此操作。当我粘贴到目标编辑器时，我得到了正确的结果：文本的格式就像在原始编辑器中一样，包括链接等。

问题是，我需要使用“复制到剪贴板”按钮来做同样的事情。我已经尝试直接在编辑器元素上使用它：

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

...但剪贴板中没有任何内容。我尝试将内容放入常规输入元素中，然后在上面执行相同的操作，但是当我粘贴到目标编辑器中时，我得到的是原始 HTML 而不是格式化的文本。

总之，如果内容编辑器是这样的……

One line

Two lines

...我需要它像这样粘贴到目标中（我重申，在不同的网站上）...

One line

Two lines

...而不是这样：

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

标签： javascript

解决方案

我已经为此工作了一段时间，我终于明白了！使用它vue2-editor的contenteditable div文本编辑器。这就是为什么您不能使用该.select()方法的原因。采用

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")

我不是 vue 专家，这就是我不使用 refs 的原因，我相信你应该在这里举一个例子来说明我的意思。

推荐阅读