如何让 Quill.js 解析包含块级元素的嵌套列表？

Answer 1

您应该在以下情况下规范化嵌套列表值：

您想在 quilljs 编辑器中插入嵌套值，这里有一些代码可能会有所帮助：

  function normalizeNestedList(editorValue){


  if(document){
    let tempEditorNode = document.createElement('div');
    tempEditorNode.innerHTML = editorValue;
    const olElems = tempEditorNode.querySelectorAll('ol');
    const ulElems = tempEditorNode.querySelectorAll('ul');
    moveNestedList(olElems);
    moveNestedList(ulElems);

    return tempEditorNode.innerHTML;
  }
}

function moveNestedList(ContainerListElems){
  const quillIntentConst = `ql-indent-`;
  let currentParentToInserted = null;
  for(let i=0; i< ContainerListElems.length; i++){
    const containerListElem = ContainerListElems[i];
    const listDepth = getMaxParents(containerListElem);
    if(listDepth > 0) {
      const containerListElemChilds = containerListElem.childNodes;
      for (let j = 0; j < containerListElemChilds.length; j++) {
        if (containerListElemChilds[j].nodeName === 'LI') {
          containerListElemChilds[j].setAttribute('class',`${quillIntentConst}${listDepth}`);
        }
      }
      insertAfter(currentParentToInserted,containerListElem.outerHTML);
      containerListElem.remove();
    }else {
      currentParentToInserted = containerListElem;
    }
  }
}

function getMaxParents(elem){
  let parentNode = elem.parentNode;
  let count = 0;
  if(parentNode !== null && typeof parentNode !== 'undefined') {
    let nodeName = parentNode.nodeName;
    while (parentNode !== null && typeof parentNode !== 'undefined' && (nodeName === 'UL' || nodeName === 'OL' || nodeName === 'LI')) {
      parentNode = parentNode.parentNode;
      nodeName = parentNode.nodeName;
      if(nodeName === 'UL' || nodeName === 'OL' ) {
        ++count;
      }
    }
  }
  return count;
}

function insertAfter(newNode, referenceNode) {
  newNode.insertAdjacentHTML('afterend', referenceNode);
}

你可以调用

normalizeNestedList

函数

Answer 2

我必须修改 @anztrax 提供的示例代码才能使其运行并正确处理深度。这是一个“简单”的解决方案，如果在“UL”列表项中找到“OL”（反之亦然），则完整修复将正确分解列表，以便保留数字和项目符号。

var formattedHTML = normalizeNestedList(HTML_Text);

function normalizeNestedList (editorValue) {
  if (document) {
    const tempEditorNode = document.createElement('div')
    tempEditorNode.innerHTML = editorValue
    if (tempEditorNode.querySelectorAll('li ol, li ul').length) {
      const lists = tempEditorNode.querySelectorAll('ol, ul')
      moveNestedList(lists)
    }

    return tempEditorNode.innerHTML
  }
}

function moveNestedList (ContainerListElems) {
  const quillIntentConst = 'ql-indent-'

  const listsIndexesByDepth = Array.from(ContainerListElems)
    .map((x) => {
      const depth = getMaxParents(x)
      return {
        list: x,
        depth
      }
    })
    .sort((a, b) => b.depth - a.depth)

  let currentParentToInserted = null
  for (let i = 0; i < listsIndexesByDepth.length; i++) {
    const containerListElem = listsIndexesByDepth[i].list
    if (listsIndexesByDepth[i].depth > 0) {
      const containerListElemChilds = containerListElem.childNodes
      currentParentToInserted = containerListElem.parentNode
      for (let j = 0; j < containerListElemChilds.length; j++) {
        if (containerListElemChilds[j].nodeName === 'LI' && containerListElemChilds[j].className.indexOf(quillIntentConst) === -1) {
          containerListElemChilds[j].setAttribute(
            'class',
            `${quillIntentConst}${listsIndexesByDepth[i].depth}`
          )
        }
      }
      insertAfter(currentParentToInserted, containerListElem.innerHTML)
      containerListElem.remove()
    } else {
      currentParentToInserted = containerListElem
    }
  }
}

function getMaxParents (elem) {
  let parentNode = elem.parentNode
  let count = 0
  if (parentNode !== null && typeof parentNode !== 'undefined') {
    let nodeName = parentNode.nodeName
    while (
      parentNode
    ) {
      parentNode = parentNode.parentNode
      nodeName = parentNode?.nodeName
      if (nodeName === 'UL' || nodeName === 'OL') {
        ++count
      }
    }
  }
  return count
}

function insertAfter (newNode, referenceNode) {
  newNode.insertAdjacentHTML('afterend', referenceNode)
}