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

setOptions

更新编辑器的配置

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

setEditable

设置编辑器的状态

// 设置编辑器只读
editor.setEditable(false)

unregisterPlugin

注销插件

在线试一试

在线试一试

下载教程 Demo

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