如何解决可以将剪贴板文本/html mimetype 复制到 javascript 中的文本/纯文本吗?
假设我有从复制到剪贴板事件(例如 text/html
)生成的 document.execCommand
。
有没有办法在不丢失 text/plain
数据的情况下将该数据复制到 text/html
mimetype 中?如果是这样,这怎么可能?请注意,我目前在复制剪贴板中有 text/html 数据,不能同时写入两者。
解决方法
最好的可能是直接在复制时处理它。由于 text/html
只应在从 Selection 复制而不是从输入复制时设置,因此我们可以通过 Range API 获取标记,并覆盖复制事件的数据。
addEventListener( "copy",(evt) => {
const selection = getSelection();
if( selection.isCollapsed ) return;
evt.preventDefault();
const range = selection.getRangeAt(0);
const data_as_html = new XMLSerializer().serializeToString( range.cloneContents() );
evt.clipboardData.setData("text/plain",data_as_html);
evt.clipboardData.setData("text/html",data_as_html);
} );
<p>
<span style="color:red;font-weight:bold">copy</span><span style="color:green;font-weight:thinner"> this</span>
<span style="color:blue"> text</span>
</p>
<div contenteditable>Paste here as rich-text</div>
<textarea cols="30" rows="10">Paste here as markup</textarea>
现在OP说当时做不到,不知道是什么原因。
这意味着他们需要能够读取剪贴板的内容,为此,他们需要通过剪贴板 API 的权限或通过处理 "paste"
事件获得用户的批准。
然而,似乎没有浏览器真正支持从 Clipboard API 读取 plain/text
以外的任何东西,这让我们只剩下 paste 事件:
btn.onclick = (evt) => {
addEventListener( "paste",(evt) => {
const data_as_html = evt.clipboardData.getData("text/html");
if( data_as_html ) {
}
addEventListener("copy",(evt) => {
evt.preventDefault();
evt.clipboardData.setData("text/plain",data_as_html);
evt.clipboardData.setData("text/html",data_as_html);
},{ once: true } );
document.execCommand("copy");
},{ once: true } );
document.execCommand("paste");
}
<button id="btn">convert clipboard content to markup</button><br>
<p>
<span style="color:red;font-weight:bold">copy</span><span style="color:green;font-weight:thinner"> this</span>
<span style="color:blue"> text</span>
</p>
<div contenteditable>Paste here as rich-text</div>
<textarea cols="30" rows="10">Paste here as markup</textarea>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。