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

Question

我们目前正在为一个项目使用 quilljs。当我们尝试通过剪贴板模块中的 dangerouslyPasteHTML API 添加 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);

但是，在创建新行(按回车键(时，相同的数据 ID 也会出现在新段落中。如何确保新段落具有自定义数据 ID 或不包含"数据 ID"属性？

Answer 1

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

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 属性。

Answer 2

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