javascript - 在 TipTap 中将类添加到段落节点

Question

我一直在努力完成我认为在 TipTap 2.0 中非常简单的任务。我正在尝试将一个类添加到选定的段落中。我正在尝试的代码如下:

this.editor.chain().focus().updateAttributes('paragraph', {class:'lead'});

我希望每个段落都可以编辑。我不希望所有段落都添加相同的类。

Answer 1

经过进一步调查，我找到了解决方案。我最初的假设是错误的。我以为你使用 updateAttributes 直接向段落添加一个类。但是您需要使用自己的 'class' 属性扩展 Paragraph，然后您可以使用 renderHTML 修改 HTML。

const CustomParagraph = Paragraph.extend({
            addAttributes() {
                return {
                    class: {
                        default: null,
                        // Take the attribute values
                        renderHTML: attributes => {
                            // … and return an object with HTML attributes.
                            return {
                                class: `${attributes.class}`,
                            }
                        },
                    },
                }
            },
        })

this.editor = new Editor({
            element: this.tiptapEditorTarget,
            extensions: [
                CustomParagraph,
            ],
        });

this.editor.commands.updateAttributes('paragraph', {class:'lead'});