如何在鹅毛笔编辑器的每个块上创建唯一的ID？

Question

我想为鹅毛笔编辑器的每个

id

添加一个 uniq

p block

。

我已经尝试过这段代码，但它只为每个

id

添加相同的

p block

。

const BlockBlot = Quill.import('blots/block');

class CustomBlockBlot extends BlockBlot {
  static create(value) {
    const node = super.create(value);
    node.setAttribute('id', Math.random());
    return node;
  }
}
Quill.register('formats/block', CustomBlockBlot);

const quill = new Quill('#surface-render', {
  theme: 'snow',
  modules: {
    toolbar: toolbarOptions
  }
});

你会怎么做？

Answer 1

我可能可以解决您的问题！这种方法动态地将 ID 添加到 React Quill 编辑器中的标题（h1、h2、h3），确保它们与标题内容匹配。 您可能需要修改它以满足您的需求。

function addIdsToHeadings(quill, options) {
  if (!options.enable) return;

  const processHeadings = () => {
    const headings = quill.container.querySelectorAll('h1, h2, h3');
    headings.forEach((heading) => {
      const text = heading.innerText || heading.textContent || '';
      const newId = text.trim().replace(/\s+/g, '-').toLowerCase();

      if (text.trim() && heading.id !== newId) {
        // Update ID only if it differs from the current one
        heading.id = newId;
      }
    });
  };

  const debouncedProcess = debounce(processHeadings, 200); // Debounce to optimize performance

  // Monitor text changes to add or update IDs
  quill.on('text-change', debouncedProcess);
}

然后添加

enable

选项

const modules = {
  toolbar: {
    container: '#toolbar'
  },
  addIdsToHeadings: {
    enable: true
  }
};

这只是一个建议，但也许你想考虑 id 生成器，例如 nanoid 或 uuid