html Slate编辑器问题:无法从Slate点解析DOM点:{“path”:[0,0],“offset”:30}

bweufnob  于 2023-03-27  发布在  其他
关注(0)|答案(1)|浏览(1756)

说明:当我在当前光标位置添加一个自定义链接到石板编辑器中,并在插入的链接后使用制表符或空格时,会抛出此错误。
这是我用来将自定义链接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

cdmah0mi

cdmah0mi1#

尝试将contentEditable设置为false,并将userSelect CSS属性设置为'none'
range.insertNode之前,添加以下代码:

newElement.contentEditable = 'true';
newElement.style.userSelect = 'none';

在这个GitHub问题中,Slate开发人员解释说,您必须设置这些属性以避免此错误。

相关问题