如何将JavaScript复制的HTML内容粘贴到TinyMCE编辑器中？

问题核心在于你当前的复制逻辑仅向剪贴板写入纯文本，TinyMCE会把粘贴的纯文本HTML标签原样显示，而不会解析渲染。要实现类似谷歌地图的富内容粘贴效果，需要向剪贴板同时写入纯文本和HTML格式数据，让编辑器识别并解析HTML。

步骤1：修改复制函数 #

替换原有的myFunction，使用navigator.clipboard.write()来写入多格式的剪贴板数据：

function myFunction() {
  const copyText = document.getElementById("myInput");
  const htmlContent = copyText.value; // 获取input中的HTML内容
  
  // 创建包含HTML和纯文本的剪贴板项
  const clipboardItem = new ClipboardItem({
    "text/html": new Blob([htmlContent], { type: "text/html" }),
    "text/plain": new Blob([htmlContent], { type: "text/plain" })
  });

  // 写入剪贴板
  navigator.clipboard.write([clipboardItem])
    .then(() => {
      console.log("HTML内容已复制到剪贴板");
    })
    .catch(err => {
      console.error("复制失败:", err);
    });
}

步骤2：确认TinyMCE粘贴配置 #

你的现有配置已经开启了正确的粘贴选项，确保以下配置保持生效：

• paste_as_text: false：禁止强制粘贴为纯文本
• paste_auto_cleanup_on_paste: false：关闭自动清理粘贴内容
• powerpaste插件已加载：该插件能更好地处理富内容粘贴

原理说明 #

通过ClipboardItem同时提供text/html和text/plain两种格式，剪贴板会根据目标应用的类型选择合适的内容。TinyMCE会优先读取text/html格式，解析其中的HTML标签并渲染成富文本，而不是显示纯文本代码。

内容的提问来源于stack exchange，提问作者kim li