tiptap 中文文档

tiptap editor 方法

tiptap编辑器的 editor 方法的可以返回任何内容,请勿与commands命令混淆,commands 用于更改编辑器的状态(内容、选择内容等),并且仅返回true/false

can

检查命令或命令链路是否可以执行 ,不会真实执行这些命令,比如是否可以启用/禁用或显示/隐藏按钮等

//如果可以执行 undo 命令返回 true
editor.can().undo()

chain

命令链路,将一个命令或多个命令串联起来执行

//一次执行两个命令
editor.chain().toggleBold().focus().run()

destroy

销毁编辑器实例并注销所有事件

// www.itxst.com
editor.destroy()

getHTML

获取编辑器内容,返回 html 字符串

// 返回 html 字符串
let cont = editor.getHTML()

getJSON

获取编辑器内容,返回 json 字符串

// 返回 json 字符串
let cont = editor.getJSON()

getText

获取编辑器内容,返回纯文本

// Give me plain text!
editor.getText()
// 两个节点 nodes 之间插入 两个换行符
editor.getText({ blockSeparator: "\n\n" })

getAttributes

Get attributes of the currently selected node or mark.
 获取选中的节点或标记的属性 参数string | NodeType | MarkType

// 返回 json 字符串
editor.getAttributes('link').href

isActive

Returns if the currently selected node or mark is active.
 返回选中节点或标记的状态

// Check if it’s a heading 
editor.isActive('heading')
// Check if it’s a heading with a specific attribute value
editor.isActive('heading', { level: 2 })
// Check if it has a specific attribute value, doesn’t care what node/mark it is
editor.isActive({ textAlign: 'justify' })

registerPlugin

注册插件ProseMirror

参数
类型说明
pluginPluginProseMirror 插件
handlePlugins?(newPlugin: Plugin, plugins: Plugin[]) => Plugin[]Control how to merge the plugin into the existing plugins

setOptions

更新编辑器的配置

// 添加 class 样式到编辑器实例
editor.setOptions({
  editorProps: {
    attributes: {
      class: 'my-custom-class',
    },
  },
})

setEditable

设置编辑器的状态

参数
类型说明
editablebooleantrue 可编辑、false 只读
emitUpdateboolean是否触发 onUpdate 事件,默认 true
// 设置编辑器只读
editor.setEditable(false)

unregisterPlugin

注销插件

参数
类型说明
nameOrPluginKeystring | PluginKey插件名

在线试一试

在线试一试

Catalog
快速入门 Guide 向导 API 列表 tiptap 方法 tiptap 属性 titap 配置 commands 命令 nodes 节点 marks 标记 extensions 扩展