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

Question

我们目前正在一个项目中使用 quilljs。当我们尝试通过 Clipboard 模块中的angerouslyPasteHTML 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);

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

Answer 1

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