首页 > 解决方案 > 在 Quilljs 中保留自定义 ID 属性

问题描述

我们需要为我们在新行上创建的每个 div 保留 ID 属性。我们尝试将 quill delta 保存在本地存储中,当尝试使用 setContents() 进行设置时,ID 会发生变化。当我们尝试插入新的 Delta 或文本时,它会创建新的随机 ID。

import Quill from 'quill';
import {v4 as UUID4} from 'uuid';
const Parchment = Quill.import('parchment');
const IDAttribute = new Parchment.Attributor.Attribute('id-attribute', 'id', {
  scope: Parchment.Scope.BLOCK,
});
Quill.register(
  {
    'attributors/attribute/id': IDAttribute,
  },
  true
);

Quill.register(
  {
    'formats/id': IDAttribute,
  },
  true
);

const Block = Quill.import('blots/block');
const Delta = Quill.import('delta');
Block.tagName = 'p';
Quill.register(Block, true);
class BlockBlot extends Block {
  constructor(domNode) {
    super(domNode);
    domNode.setAttribute('id', UUID4());
    console.log(Delta(BlockBlot))
    this.cache = {};
  }
}

BlockBlot.blotName = 'block';

export default BlockBlot;

import Block from "./QuillHelpers/test"
Quill.register('formats/block', Block );

这是添加自定义属性并将它们保留在羽毛笔中的正确方法吗?

框架:React 17 react-quill:1.3.5

标签: javascriptreactjsquillreact-quill

解决方案


推荐阅读