说明:当我在当前光标位置添加一个自定义链接到石板编辑器中,并在插入的链接后使用制表符或空格时,会抛出此错误。
这是我用来将自定义链接DOM元素添加到slate编辑器当前光标位置的代码。
window.addEventListener("message", (event) => {
var linkDOMElement = document.getElementById('insertLink');
if (!linkDOMElement) {
var range;
if (event.data && (typeof event.data === 'string' || event.data instanceof String) && event.data.includes("atProspectId") && window.getSelection) {
var range = window.getSelection().getRangeAt(0);
var html = event.data;
// create a span dom element
var newElement = document.createElement('span');
newElement.id = 'insertLink';
newElement.innerHTML = html;
// insert created dom element named newElement at current cursor position
range.insertNode(newElement);
}
}
}, false);
场景:我们有一个脚本,它将我们的自定义图标附加到外展电子邮件编辑器,显然外展电子邮件编辑器使用石板编辑器。点击此图标后,它在一个新的选项卡中打开我们的扩展应用程序[现在]。如果用户点击“插入链接”按钮,链接应该插入在当前光标位置,这是预期的。但是,我无法点击链接并在插入后进一步写入任何文本。如果我在链接插入后使用空格或制表符,则会显示此错误。您可以在所附视频中清楚地看到这一点。
环境:
Slate版本:不知道,因为这是发生在第三方网站操作系统:Windows浏览器: chrome
要查看上述错误是如何抛出的,您可以单击以下链接并观看43秒视频。
https://user-images.githubusercontent.com/86764119/146716602-657bf5ce-535a-4bdb-bb36-64c3fbb8d548.mp4
1条答案
按热度按时间cdmah0mi1#
尝试将
contentEditable
设置为false
,并将userSelect
CSS属性设置为'none'
。在
range.insertNode
之前,添加以下代码:在这个GitHub问题中,Slate开发人员解释说,您必须设置这些属性以避免此错误。