如何创建带有文本的链接并将其粘贴到电报桌面

Question

我正在尝试创建"在不同的应用程序中使用剪贴板的按钮。

我希望:

1. 在简单文本编辑器中按ctrl+v将创建纯文本
2. ctrl+v在RTF(或应用程序与"链接";支持)将创建链接

下面是一个简化的代码示例:

const aElement = document.createElement('a');
aElement.href = 'https://stackoverflow.com/';
aElement.innerText = 'stackoverflow link';
const data = [
new ClipboardItem({
'text/plain': new Blob([aElement.innerText], {type: 'text/plain'}),
'text/html': new Blob([aElement.outerHTML], {type: 'text/html'}),
})
];
navigator.clipboard.write(data);

这个例子在除了telegram桌面应用程序之外的任何地方都可以正常工作。我已经尝试了Blob和ClipboardItem选项的每一个变化，我知道。

我也试过复制和粘贴在电报桌面创建的链接，他们粘贴链接无处不在!当我从电报桌面复制链接时，我看到的结构与我的相似

下面是一个简化的调试示例:

document.body.onclick = () => window.navigator.clipboard.read()
.then(r => r[0])
.then(r => r.types.map(t => r.getType(t).then(b => b.text())))
.then(r => Promise.all(r))
.then(p => console.log(p))

我做错了什么?

Answer 1

Telegram将不会从剪贴板插入text/html到消息中。您可以通过在消息中输入任何html代码来验证这一点-它将像文本一样读取它。在您的情况下，一个更好的选择是这样做:

const aElement = document.createElement('a');
aElement.href = 'https://stackoverflow.com/';
aElement.innerText = 'stackoverflow link';
const textPlainLink = aElement.innerText + ' 👉 ' + aElement.href;
const data = [
new ClipboardItem({
'text/plain': new Blob([textPlainLink], {type: 'text/plain'}),
'text/html': new Blob([aElement.outerHTML], {type: 'text/html'}),
})
];
navigator.clipboard.write(data);
console.log(textPlainLink)