如何为Quill编辑器的每个区块创建唯一ID？

问题原因 #

你当前用Math.random()生成ID，虽重复概率低，但在高频创建块或批量初始化内容的场景下，短时间内多次调用可能出现值碰撞；且随机数本身无法保证绝对唯一，导致所有块ID重复。

解决方案一：自增计数器（绝对唯一） #

用全局计数器生成递增ID，确保每个块的ID完全不重复：

const BlockBlot = Quill.import('blots/block');
// 初始化计数器，可自定义起始值
let blockIdCounter = 1;

class CustomBlockBlot extends BlockBlot {
  static create(value) {
    const node = super.create(value);
    // 带前缀避免与页面其他元素ID冲突
    node.setAttribute('id', `quill-block-${blockIdCounter++}`);
    return node;
  }
}
Quill.register('formats/block', CustomBlockBlot);

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

解决方案二：时间戳+随机数（低碰撞概率） #

若不想用自增计数器，可结合时间戳与随机数进一步降低重复概率：

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

class CustomBlockBlot extends BlockBlot {
  static create(value) {
    const node = super.create(value);
    // 生成唯一ID：毫秒级时间戳 + 6位随机数
    const uniqueId = `${Date.now()}-${Math.floor(Math.random() * 1000000)}`;
    node.setAttribute('id', `quill-block-${uniqueId}`);
    return node;
  }
}
Quill.register('formats/block', CustomBlockBlot);

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

补充说明 #

• 给ID加前缀（如quill-block-）可避免与页面其他元素ID冲突。
• 若需持久化ID（如保存内容后重新渲染保持ID不变），需在Quill内容序列化/反序列化时处理ID的存储与恢复，此时自增计数器需结合后端存储保证一致性。

内容的提问来源于stack exchange，提问作者Raol mAX