我如何向quilljs中的每个`p`元素添加属性？

Question

如何在quilljs中为每个Block元素添加属性？

我知道我可以扩展Block，但是即使按键盘上的Enter键也可以添加属性吗？

let Block = Quill.import('blots/block');

class ParaBlot extends Block {
   static create(value) {
      let node = super.create();
      return node;
   }
}

Answer 1

向每个Block元素添加样式或类之类的属性，

我们可以从block blot库扩展默认的parchment元素，

就像您已经在做的一样，我们导入Block Blot元素，并使用setAttribute函数编辑节点的属性以匹配我们的需求。

例如，我将在此处添加边框和customBlock类。

最后我们用我们的覆盖默认的BlockBlot

const BlockBlot = Quill.import('blots/block');

class CustomBlockBlot extends BlockBlot {
    static create(value) {
        const node = super.create(value);
        node.setAttribute('style', 'border: 1px solid lightgrey');
        node.setAttribute('class', 'customBlock');
        return node;
    }
}
Quill.register('formats/block', CustomBlockBlot);

这里是演示https://codepen.io

此代码块必须在创建目标Quill实例之前运行与new Quill(...)

我们还应该考虑到它不能动态更改格式，尽管我相信我们可以备份Delta并使用这些新的默认值创建一个新的新Quill实例。

关于此implement-custom-editor-for-quill-blot的另一篇好文章>