TipTap使用问题记录

tiptap

1、给节点添加自定义属性，需要对对应node节点进行属性配置 Custom extensions

  addAttributes() {
    return {
      'cell-data-type': {
        default: null,
        // // Customize the HTML parsing (for example, to load the initial content)
        // parseHTML: element => element.getAttribute('data-color'),
        // // … and customize the HTML rendering.
        // renderHTML: attributes => {
        //   return {
        //     'data-color': attributes.color,
        //     style: `color: ${attributes.color}`,
        //   }
        // },
      },
    }
  },
})

2、创建自定义插件 Node.create，见Schema

import { Node } from '@tiptap/core'

const Document = Node.create({
  name: 'doc',
  topNode: true,
  content: 'block+',
})

const Paragraph = Node.create({
  name: 'paragraph',
  group: 'block',
  content: 'inline*',
  parseHTML() {
    return [
      { tag: 'p' },
    ]
  },
  renderHTML({ HTMLAttributes }) {
    return ['p', HTMLAttributes, 0]
  },
})

const Text = Node.create({
  name: 'text',
  group: 'inline',
})