什么是 hyperpaste
hyperpaste 是一个可以让你在富文本编辑器中复制 HTML 片段，并在剪贴板中保留格式的 npm 包。该模块适用于支持富文本编辑的 Web 应用程序，如 Google Docs 或 Medium。
安装
--- ------- ---------- ------
使用
------ ---------- ---- ------------- --------------------
效果
可以在 Google Docs 或类似应用中尝试复制一个形如
----- --------- ----------- ------
的 HTML 片段，然后将其粘贴回一个支持富文本编辑的应用程序。你将看到粘贴的文本保留了 HTML 格式，而不是变成了纯文本。
原理
在预览复制的内容之前，hyperpaste.enable() 会创建一个隐藏的 div 元素，在此元素中插入被复制的 HTML 片段。然后，该元素的 innerHTML 属性值将被传递给富文本编辑器的 pasteHTML() 方法，从而保留复制的格式。
相关背景知识：
document.execCommand('paste')方法被用来粘贴文本。document.execCommand('insertHTML')方法被用来在富文本编辑器中插入 HTML。不同的编辑器可能会使用不同的方法名称。
限制
由于浏览器安全策略的限制，不能在没有用户操作的情况下自动执行 document.execCommand('paste') 方法。因此，用户必须首先手动触发粘贴操作（例如使用 Ctrl+V 或右键菜单中的粘贴选项），然后才能使用该模块。
总结
hyperpaste 可以让你在富文本编辑器中保留复制的 HTML 格式，这对于需要在富文本编辑器中编辑并粘贴 HTML 代码的用户来说是非常方便的。通过本教程，你已经学习了如何使用该模块。在将其用于你的应用程序之前，请确保已经明确了浏览器安全策略对于 document.execCommand('paste') 方法的限制，并了解你的富文本编辑器所使用的插入 HTML 的方法名称。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055ade81e8991b448d8847