angular - 向节点元素添加选项

Question

我正在构建一个 Angular 11 应用程序。在这个应用程序中，我使用的是 Tiptap 编辑器。

我正在创建一个自定义节点来支持 div 元素。

此自定义节点的代码是：

import { Node, mergeAttributes } from '@tiptap/core';

const Div = Node.create({
  name: 'div',
  defaultOptions: {
    HTMLAttributes: {},
  },
  content: 'block*',
  group: 'block',
  defining: true,
  parseHTML() {
    return [
      { tag: 'div' },
    ];
  },
  renderHTML({ HTMLAttributes }) {
    return ['div', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
  },
});

export default Div;
export { Div };

如何为 div 设置一个类，我试过了。

public content: any = {
    type: 'doc',
    content: [
      {
        type: 'div',
        attrs: {
          class: 'custom-class',
        },
        content: [
          {
            type: 'paragraph',
            content: [
              {
                type: 'text',
                text: 'Example ',
              },
              {
                type: 'text',
                marks: [
                  {
                    type: 'bold',
                  },
                ],
                text: 'Text',
              },
            ],
          },
        ],
      },
    ],
  }

Answer 1

您可以在中设置一个类HTMLAttributes：

import { Node, mergeAttributes } from '@tiptap/core';

const Div = Node.create({
  name: 'div',
  defaultOptions: {
    HTMLAttributes: {
      // you can set custom class here
      class: 'custom-class',
    },
  },
  ...
}