Shadow 内的 Quill 编辑器 DOM

Question

在此示例中，编辑器是在 Shadow Root 中创建的。

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

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

原因是 window.getSelection 总是 returns 在 Shadow Root 中选择空白。

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

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

Answer 1

完成。

This fix 不包括 Safari 中缺失的 shadow.getSelection，但所有其他浏览器应该都可以。就我而言，我只需要 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 页面。

Shadow 内的 Quill 编辑器 DOM

Quill editor inside Shadow DOM

javascript

quill

ngx-quill