javascript - 使用 Javascript 复制 HTML 内容，粘贴为格式化文本

Question

我有一个用户可以输入原始 HTML 的字段。这看起来像:

<input type="text" id="editor" value="<p>Hi,</p><p>Here is a <a href='domain.com'>link</a> I'd like you to visit.</p>" />

现在，我需要一个“复制到剪贴板”按钮，该按钮以我们可以将其粘贴为格式化文本(没有 HTML 标记)的方式获取该字段的内容。在上面的示例中，复制/粘贴输出应为:

Hi,

Here is a [link][1] I'd like you to visit.

我已经实现了这样的“复制到剪贴板”按钮:

let answer = document.getElementById("editor");
answer.select();
document.execCommand("copy");

这会将输入的内容放在剪贴板上，但是当我将其粘贴到其他地方时，我会得到原始 HTML。
我需要一些方法将 HTML 转换为格式化文本，但我找到的唯一解决方案是这个，它不适用于链接:
enter link description here
有没有原生的 Javascript 方法来做到这一点？如果不是，最好的解决方案是什么？

Answer 1

试试 Element.insertAdjacentHTML()

let answer = document.getElementById("editor");
let result = document.getElementById("result");
let button = document.getElementById("button");

button.onclick = function() {
  answer.select();
  document.execCommand("copy");
};

function conVert(event) {
  event.preventDefault();
  let val = answer.value
  console.log(val)
  result.insertAdjacentHTML('afterbegin', val);
  // you can use event.target here to past it as formated to targeted element onpaste
}

// on button
buttonpaste.onclick = function(event) {
  conVert(event)
}
//on paste
document.onpaste = function(event) {
  console.log("Paste")
  conVert(event)
};

#result {
  min-height: 100px;
  background-color: yellow
}

#result2 {
  min-height: 100px;
  background-color: gray;
}

<input type="text" id="editor" value="<p>Hi,</p><p>Here is a <a href='domain.com'>link</a> I'd like you to visit.</p>" />

<button id="button">COPY</button>
<button id="buttonpaste">PASTE</button>


<div id="result" contentEditable="true"></div>
<div id="result2" contentEditable="true"></div>