Question

我们目前正在为项目使用quilljs。当我们尝试通过来自Clipboard模块的dangerouslyPasteHTML API添加html时，会删除段落中的自定义属性。

例如：

应用以下代码：

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

获得的输出是

<p>Hello</p>

如何保留属性＆＃39; data-id＆＃39;在输出？

更新1：我设法保留了自定义属性＆＃39; data-id＆＃39;使用以下代码：

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。如何确保新段落具有自定义数据ID或不包含＆＃39; data-id＆＃39;属性？

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

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

1 个答案: