如何在quilljs中保留段落的自定义属性

Question

我们目前正在为一个项目使用quilljs。当我们试图通过剪贴板模块中的dangerouslyPasteHTML应用程序接口添加html时，段落中的自定义属性将被剥离。

例如：

在应用以下代码时：

quill.clipboard.dangerouslyPasteHTML("<p data-id='1'>Hello</p>");

获得的输出为

<p>Hello</p>

如何在输出中保留属性'data-id‘？

更新1:我已经设法使用以下代码保留了自定义属性'data-id‘：

var Parchment = Quill.import('parchment');
var dataId = new Parchment.Attributor.Attribute('data-id', 'data-id', {
    scope: Parchment.Scope.BLOCK
});
Quill.register(dataId);

但是，在创建新行(按enter键)时，相同的data-id也会出现在新段落中。如何确保新段落具有自定义的data-id或不包含'data-id‘属性？

Answer 1

我建议在textChanged方法中添加事件处理。您可以检查增量，看看'insert‘是否也包含一个'attributes’字段，这会导致它被修改。如果发生这种情况，您可以触发一个通过当前选择索引保留的updateContents。然后删除插入的长度，并重新插入不带属性的内容。

Answer 2

我回答这个问题已经很晚了，但是对于任何遇到这个问题的人，我已经通过以下方式解决了这个问题：

import Quill from 'quill';

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');

class BlockBlot extends Block {
  constructor(domNode) {
    super(domNode);
    domNode.setAttribute('id', '');
    this.cache = {};
  }
}

BlockBlot.blotName = 'block';

export default BlockBlot;

因此，基本上我们希望提供一个从Block印迹扩展而来的自定义印迹，并使用它来执行Block格式。在构造函数中，我们可以对属性做任何我们想做的事情。在我的例子中，我删除了添加到新块中的id属性。