Question

我想在Quill编辑器中的每个清单项目中添加唯一的ID。
到目前为止，这是我的代码：

import Quill from 'quill'
import uuid from 'uuid'
var ListItem = Quill.import('formats/list/item')

class CustomListItem extends ListItem {
  static create() {
    const node = super.create()
    // check if list item is check
    if (node.hasAttribute('data-checked')) { //should check parent?
      node.setAttribute("id", "task"+uuid.v4())
    }
    return node
  }

  split(index, force = false) {
    if (force && (index === 0 || index >= this.length() - 1)) {
      const clone = this.clone()
      clone.domNode.id = 'task'+uuid.v4()
      if (index === 0) {
        this.parent.insertBefore(clone, this)
        return this
      }
      this.parent.insertBefore(clone, this.next)
      return clone
    }
    const next = super.split(index, force)
    next.domNode.id = 'task'+uuid.v4()
    this.cache = {}
    return next
  }
}

CustomListItem.className = 'task'
CustomListItem.blotName = 'list-item'
CustomListItem.tagName = 'LI'

export default CustomListItem

我的问题是每个列表项（包括有序列表和无序列表）也具有相同的ID。

如何检查此列表项是否属于带有属性数据检查的父级列表？
/>
列表和列表项之间的关系在这里-> Quill List Item formats

我也很难理解格式组件内部的情况。

Answer 1

列表项目有3种类型：订购，项目符号和检查。 Check是我要使用的一项。最后，我给所有类型的列表项提供了唯一的ID，然后在编辑器更改时（而不是在上面的代码中）在节点创建时通过查看其父节点来查找所需的列表项。因此，节点创建功能就变成这样：

static create() {
    const node = super.create()
    node.setAttribute("id", uuid.v4())
    return node
}

因此所有类型的所有列表项都获得一个UUID。然后，我创建一个函数来遍历具有父级且属性已检查数据的所有列表项，这意味着它是一个检查列表项。

var lists = document.querySelectorAll('li');
  [].forEach.call(lists, (list) => {
    if (list.parentNode.nodeName === 'UL'
      && list.parentNode.hasAttribute('data-checked')
      && list.innerText) {
      // do something with check list item

在自定义污点中给uuid来检查羽毛笔编辑器中的列表项

1 个答案: