多个焦点选择器动态显示 QuillJS 工具栏，可能吗？

Question

我正在使用 Django 的 QuillJS 版本，我想做的是只显示所选文本区域的工具栏。使用 JS 有点奏效：

const parentDiv = Array.from(document.getElementsByClassName("django-quill-widget-container"));
const toolbar = Array.from(document.getElementsByClassName("ql-toolbar"));
const editor = Array.from(document.getElementsByClassName("ql-editor"));

for (let i = 0; i < editor.length; i++) {
    toolbar[i].style.display = "none";
    parentDiv[i].style.borderTop = "1px solid #ccc";
    editor[i].addEventListener("focusin", function () {
      toolbar[i].style.display = "";
      parentDiv[i].style.borderTop = "";
    });
    editor[i].addEventListener("focusout", function () {
      toolbar[i].style.display = "none";
      parentDiv[i].style.borderTop = "1px solid #ccc";
    });
}

问题是单击工具栏以利用其功能也算作焦点离开。

所以是的，它不起作用。

有什么想法吗？

Answer 1

最后我用了一个更简单的方法：

const parentDiv = Array.from(document.getElementsByClassName("django-quill-widget-container"));
const toolbar = Array.from(document.getElementsByClassName("ql-toolbar"));
const editor = Array.from(document.getElementsByClassName("ql-editor"));


function clearToolbar(index) {
  toolbar[index].style.display = "none";
  parentDiv[index].style.borderTop = "1px solid #ccc";
}

let editorArray = [0,1,2,3,4,5];

for (let i = 0; i < editor.length; i++) {
  toolbar[i].style.display = "none";
  parentDiv[i].style.borderTop = "1px solid #ccc";
  editor[i].addEventListener("focusin", function () {
    Array.prototype.except = function(val) {
      return this.filter(function(x) { return x !== val; });
    };

    parentDiv[i].style.borderTop = "";
    toolbar[i].style.display = "";
    editorArray.except(i).forEach(clearToolbar);
  });
}

它过滤包含 TextInputs 索引的数组，不包括所选文本字段的索引，并应用我需要的样式。没有 focusout 侦听器，工具栏现在可以完美运行。

多个焦点选择器动态显示 QuillJS 工具栏，可能吗？

Multiple focus selectors to dinamically show QuillJS toolbar, is it possible?

javascript

jquery

django

css-selectors

quill