javascript - 可以将剪贴板文本/html mimetype 复制到 javascript 中的 text/plain 吗?
问题描述
假设我已经text/html
从复制到剪贴板事件(例如document.execCommand
)生成了它。
有没有办法在不丢失数据的情况下将该数据复制到text/plain
mimetype 中text/html
?如果是这样,如何做到这一点?请注意,我当前在复制剪贴板中有 text/html 数据,不能同时写入两者。
解决方案
最好的可能是直接在复制时处理它。由于text/html
应该只在从选择复制而不是从输入复制时设置,我们可以通过 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"
事件。
然而,似乎没有浏览器真正支持plain/text
从剪贴板 API 读取其他任何内容,这让我们只剩下粘贴事件:
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>
推荐阅读
- android - Gradle 同步失败:Xposed 模块框架
- vba - 如何使用输入的点作为圆锥的顶部而不是圆锥的底部?
- python - 如何将字符串转换为在全局函数内部实例化的变量名?
- javascript - 仅获取单击的 div 元素的子元素
- android - SMS 权限在 API 27 及更高版本上取消检查自身
- angular - 角度 4:从查询参数中设置初始值会导致带有 onChange 导航的循环
- angularjs - ng-if 和 ng-model 不能为复选框一起工作
- c# - ASP.NET Core 2 SignalR Hub to receive complex object instead of string
- jquery - 上传图像功能但得到未定义的值
- python - 提交 Python 时的 Mechanicalsoup Catpcha 问题