javascript - Shadow DOM 中的 Quill 编辑器

Question

在这个例子中，编辑器是在 Shadow Root 中创建的。

https://codepen.io/artemiusgreat/pen/XWMPdWG

到目前为止，主要问题是当通过单击面板上的或按钮从工具栏模块启动时，内联格式不起作用。BoldItalic

原因是window.getSelection始终在 Shadow Root 内返回空选择。

好消息是，当通过按CTRL+B或CTRL+从键盘模块启动内联格式时，它会以某种方式起作用I。

我正在研究代码，但如果有人已经解决了这个问题，我将不胜感激。

Answer 1

完毕。

此修复不涵盖shadow.getSelectionSafari 中的缺失，但所有其他浏览器都应该可以工作。就我而言，我只需要 Chrome。

var quill = new Quill(editorControl, {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow' 
});

const normalizeNative = (nativeRange) => {

  // document.getSelection model has properties startContainer and endContainer
  // shadow.getSelection model has baseNode and focusNode
  // Unify formats to always look like document.getSelection 

  if (nativeRange) {

    const range = nativeRange;
    
    if (range.baseNode) {  
      range.startContainer = nativeRange.baseNode;
      range.endContainer = nativeRange.focusNode;
      range.startOffset = nativeRange.baseOffset;
      range.endOffset = nativeRange.focusOffset;

      if (range.endOffset < range.startOffset) {
        range.startContainer = nativeRange.focusNode;
        range.endContainer = nativeRange.baseNode;    
        range.startOffset = nativeRange.focusOffset;
        range.endOffset = nativeRange.baseOffset;
      }
    }

    if (range.startContainer) {
      
      return {
        start: { node: range.startContainer, offset: range.startOffset },
        end: { node: range.endContainer, offset: range.endOffset },
        native: range
      };
    }
  }

  return null
};

// Hack Quill and replace document.getSelection with shadow.getSelection 

quill.selection.getNativeRange = () => {
  
  const dom = quill.root.getRootNode();
  const selection = dom.getSelection();
  const range = normalizeNative(selection);
  
  return range;
};

// Subscribe to selection change separately, 
// because emitter in Quill doesn't catch this event in Shadow DOM

document.addEventListener("selectionchange", (...args) => {

  // Update selection and some other properties

  quill.selection.update()
});

Answer 2

我刚刚在我的 WebComponent 中实现了一个不错的方法——在 ShadowDOM 中使用一个iframe标签，并使用 Quill 加载另一个 HTML 页面。