Tiptap 编辑器 Configuration 配置

Tiptap 编辑器的配置相关的知识，包含了如何初始化、扩展的配置及使用方法等，我们也将配合在线例子进行说明。
本文含盖的知识点：Nodes 节点, marks 标记 and extensions 扩展

配置编辑器

通过 new Editor 对象来配置编辑器，Editor 的详细使用方法请查看左边的菜单导航

import { Editor } from '@tiptap/core'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'

new Editor({
  element: document.querySelector('.element'),
  extensions: [
    Document,
    Paragraph,
    Text,
  ],
  content: '<p>Example Text</p>',
  autofocus: true,
  editable: true,
  injectCSS: false,
})

上面的代码执行了以下操作

• 将 Tiptap 绑定到 ，.element

• 加载了 Document、Paragraph、Text 扩展

• 设置编辑器的初始内容

• 初始化后编辑器获得焦点

• 编辑器设置成可编辑状态

• 禁用默认 CSS

节点、标记、扩展

Nodes 节点 如果把文档视为树，那么节点只是该树中的一种内容类型，例如段落、标题或图片节点等。但是节点不一定是块。它也可以与文本内联呈现，例如@mentions（提及功能就是我们平时聊天邮件中的@功能）
Marks 标记 可将一个或多个标记应用于Nodes节点，例如文字的添加粗体和高亮等。
Extensions 扩展 默一类功能的集合

默认扩展

import StarterKit from '@tiptap/starter-kit'

new Editor({
  extensions: [
    StarterKit,
  ],
})

配置默认扩展

import StarterKit from '@tiptap/starter-kit'

new Editor({
  extensions: StarterKit.configure({
    heading: {
      levels: [1, 2, 3],
    },
  }),
})

禁用默认扩展里面的某个扩展

import StarterKit from '@tiptap/starter-kit'

new Editor({
  extensions: [
    StarterKit.configure({
      history: false, //设置成flase
    }),
  ],
})

下载教程 Demo

本教程Demo的源码点击这里下载，Tiptap Demo，下载完成后运行npm i初始化依赖包。