javascript - 如何在tiptap编辑器中强制第一个节点成为标题H1？

Question

我正在构建一个简单的富文本编辑器来编写博客。我想强制第一个节点始终是h1用户不应该删除的标题（标签）！

有没有办法做到这一点？

Answer 1

您可以通过自定义文档来实现这一点，您可以在其中定义文档结构。提示点击这里有一个示例页面https://tiptap.dev/examples/custom-document。

Answer 2

扩展文档：

const CustomDocument = Document.extend({
  // https://tiptap.dev/api/schema#content
  content: 'heading block*',
})

加载 CustomDocument 并为 Heading 添加默认占位符：

  new Editor({
    extensions: [
      CustomDocument,
      Placeholder.configure({
        placeholder: ({ node }) => {
          if (node.type.name === 'heading' && node.attrs.level == 1) {
            return 'H1 placeholder here';
          }
        },
      }),
    ]
  })

之后，您必须找到防止粗体/斜体/H2/H3/等的解决方案。在你的 H1 上。如果您有解决方案，请在评论中给出解决方案。

Answer 3

您可以在初始化时将其放入内容中：

const editor = useEditor({
  extensions: [
    StarterKit.configure({
      heading: {
        levels: [1, 2],
      },
    }),
    Dropcursor.configure({
      color: "#4B5563",
    }),
    Placeholder.configure({
      showOnlyWhenEditable: true,
      placeholder: "Write something or press Enter to add a new block",
    }),
    CodeBlockLowlight.configure({
      lowlight,
    }),
    TaskList,
    CustomTaskItem,
    ListItem,
    Blockquote,
    CustomOrderedList,
    CustomHorizontalRule,
    Table.configure({
      resizable: true,
    }),
    TableRow,
    TableHeader,
    TableCell,
  ],
  editorProps: {
    attributes: {
      class: "focus:outline-none subpixel-antialiased",
    },
  },
  autofocus: true,

  // THIS
  content: `
    <h1>Hello there </h1>
  `,
})