Shadow DOM 中的 Quill 编辑器

Question

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

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

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

原因是window.getSelection总是返回 Shadow Root 内的空选择。

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

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

Answer 1

完毕。

此修复不涵盖shadow.getSelection中缺少的 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 页面。

Answer 3

完整的 HTML 文件

 <html> <head> <meta charset="utf-8"> <title>CKEditor</title> <script type="text/javascript" src="https://cdn.quilljs.com/1.3.6/quill.js"></script> </head> <body> <div class="container" name="NewEditor"></div> <script> let container = document.querySelector(".container"); let shadow = container.attachShadow({ mode: 'open' }); const ele = document.createElement('div'); console.log(shadow.getRootNode()) shadow.innerHTML = `<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet" /> <link rel="stylesheet" type="text/css" href="https://cdn.quilljs.com/1.3.6/quill.bubble.css"> `; shadow.appendChild(ele); var quill = new Quill(ele, { "modules": { "toolbar": [ [ "bold", "italic", "underline", "strike", "blockquote", "code-block", { "list": "ordered" }, { "list": "bullet" }, { "script": "sub" }, { "script": "super" }, { "indent": -1 }, { "indent": "+1" }, { "direction": "rtl" }, { "size": [ "small", false, "large", "huge" ] }, { "color": [] }, { "background": [] }, { "font": [] }, { "align": [] }, "clean", "link", "image", "video" ] ] }, "placeholder": "", "readOnly": false, "theme": "snow", "value": { "ops": [ { "attributes": { "bold": true }, "insert": "Bold" } ] } }); const normalizeNative = (nativeRange) => { 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 }; quill.selection.getNativeRange = () => { const dom = quill.root.getRootNode(); const selection = dom.getSelection(); const range = normalizeNative(selection); // if(selection.focusOffset.== selection.baseOffset){ // range;length = 0. // document.activeElement.shadowRoot.querySelector('.ql-editor');focus(); // } return range; }. document,addEventListener("selectionchange". (...args) => { quill.selection;update() }); </script> </body> </html>

但仍然“泡沫”主题无法正常工作。 获取 document.activeElement 问题

此图像中的错误行

Shadow DOM 中的 Quill 编辑器

问题描述

3 个解决方案

解决方案1
0 已采纳 2021-06-11 23:23:31

解决方案2
0 2022-02-16 22:48:52

解决方案3
0 2022-07-15 14:29:18

Shadow DOM 中的 Quill 编辑器

问题描述

3 个解决方案

解决方案1 0 已采纳 2021-06-11 23:23:31

解决方案2 0 2022-02-16 22:48:52

解决方案3 0 2022-07-15 14:29:18

解决方案1
0 已采纳 2021-06-11 23:23:31

解决方案2
0 2022-02-16 22:48:52

解决方案3
0 2022-07-15 14:29:18