tiptap nodes & marks 命令大全

tiptap nodes 节点 & marks 标记的命令大全，比如deleteNode删除文档节点命令、创建setMark标记命令等总计20多个相关命令。

clearNodes

clearNodes 将节点规范化为默认节点，默认情况下是段落，它甚至可以规范化所有类型的列表,它可以在应用新节点类型之前派上用场,如果无法理解请先看 node 节点相关的文档。

editor.commands.clearNodes();

createParagraphNear

在选中节点后面创建一个空段落，如果选中的节点是同级节点的第一个节点，那么会插入到它前面。

editor.commands.createParagraphNear();

deleteNode

删除选中节点参数 typeOrName: string | NodeType 参数可以是字符串或查找需要删除的节点

// deletes a paragraph node
editor.commands.deleteNode('paragraph')
// or
// deletes a custom node
editor.commands.deleteNode(MyCustomNode)

deleteRange

删除制定区域的内容

// 删除1到10区间的内容
editor.commands.deleteRange({ from: 1, to: 10 })

deleteSelection

删除选中的内容

editor.commands.deleteSelection()

enter

触发一个回车命令

editor.commands.enter()

exitCode

如果当前选择是一个代码段落(code / pre)，exitCode命令将在当前选择之后创建一个默认块，并将光标移动到新的块上。

editor.commands.exitCode()

extendMarkRange

extendMarkRange 扩展当前的选择以包含当前标记，如果当前选择没有特定的标记，则不会更改任何内容。

// Expand selection to link marks
editor.commands.extendMarkRange('link')

// Expand selection to link marks with specific attributes
editor.commands.extendMarkRange('link', { href: 'https://itxst.com' })

// Expand selection to link mark and update attributes
editor
  .chain()
  .extendMarkRange('link')
  .updateAttributes('link', {
    href: 'https://www.itxst.com'
  })
  .run()

joinBackward

joinBackward将尝试减少该块与其之前的块之间的距离,如下使示，当光标在abc前面或空的p标签里面执行该命令将清除这个空的p标签

<!-- 示例 -->
<p> www.itxst.com</p><p></p><p>abc</p>
<!-- 执行命令 -->
editor.commands.joinBackward()

joinForward

joinBackward将尝试减少该块与其之前的块之间的距离,如下使示，当光标在.com后面或空的p标签里面执行该命令将清除这个空的p标签

<!-- 示例 -->
<p> www.itxst.com</p><p></p><p>abc</p>
<!-- 执行命令 -->
editor.commands.joinBackward()

lift

lift命令将将选中节点移动到当前的父块的同级中,请看以下例子

/* 
 如果编辑器的内容如下,当鼠标在"abc"这个p标签内时
 <ul><li><p>abc</p></li><li><p>itxst</p></li></ul>
  执行 state.editor.commands.lift('bulletList') 
  结果编辑器的内容会变成如下内容
  <p>abc</p><ul><li><p>itxst</p></li></ul>
*/

liftEmptyBlock

liftEmptyBlock命令将选中的空块移动到当前的父块中,请看以下例子

// 如果编辑器的内容如下,当鼠标在第一个空p标签内时
//<ul><li><p></p></li><li><p>itxst</p></li></ul>
// 执行 state.editor.commands.liftEmptyBlock('bulletList') 
// 结果编辑器的内容会变成如下内容
// <p></p><ul><li><p>itxst</p></li></ul>

newlineInCode

如果编辑器内容是代码块code标签，执行该命令将会在光标位置新起一行,如果不知道什么是html code标签请自行搜索相关知识。

state.editor.commands.newlineInCode()

resetAttributes

resetAttributes将节点属性重置回默认属性。

// reset the style and class attributes on the currently selected paragraph nodes
editor.commands.resetAttributes('paragraph', ['style', 'class'])

setMark

setMark命令将在当前选择处添加一个新标记。

// 将选中内容加上超链接
editor.commands.setMark("link",{ href: 'https://www.itxst.com' })

setNode

setNode将选中节点替换成指定节点

// 编辑器内容 <ul><li>abc</li></ul>
// 执行命令
state.editor.commands.setNode("paragraph")
// 执行后内容变成 <p>abc</p>

splitBlock

splitBlock将当前选择的节点拆分为两个节点，如果当前选择的节点不可分割，则该命令将被忽略。

// 拆分当前节点 保留 marks
editor.commands.splitBlock()

// 拆分当前节点 不保留 marks
editor.commands.splitBlock({ keepMarks: false }

toggleMark

toggleMark前选择中打开或关闭特定的标记。

// 如果第一次点击将选中内容加粗，那么再次点击选中内容将取消粗体
editor.commands.toggleMark('bold')

// toggles bold mark with a color attribute
editor.commands.toggleMark('bold', { color: 'red' })

// toggles a bold mark with a color attribute and removes the mark across the current selection
editor.commands.toggleMark('bold', { color: 'red' }, { extendEmptyMarkRange: true }))

toggleNode

toggleNode将选中节点转换成制定节点，比如第一次点击将选中p标签转换成h1标签，那么再次点击h1标签转换回p标签

// 如果第一次点击将选中p标签转换成h1标签，那么再次点击h1标签转换回p标签
state.editor.commands.toggleNode('heading',"paragraph")

// toggle a paragraph with a heading node
editor.commands.toggleNode('paragraph', 'heading', { level: 1 })

// toggle a paragraph with a image node
editor.commands.toggleNode('paragraph', 'image', { src: 'https://example.com/image.png' })

toggleWrap

toggleWrap使用新节点包裹当前节点或删除包裹节点。

/*
 加上编辑器内容如下
  <p>abc</p> 
 执行下面命令将会用listitem节点包裹paragraph节点（p标签）
  state.editor.commands.toggleWrap('listItem') 
 执行后编辑器内容如下
   <ul><li><p>abc</p></li></ul>
 再次执行将会恢复p标签
 */

undoInputRule

undoInputRule将撤消最近触发的输入规则

editor.commands.undoInputRule()

unsetAllMarks

unsetAllMarks将选中内容的所有 marks 标记移除

editor.commands.unsetAllMarks()

unsetMark

unsetMark将选中内容的 mark 标记 移除

editor.commands.unsetMark()

updateAttributes

updateAttributes更新 node 节点 mark 标记 的属性

// 更新节点 node 属性
editor.commands.updateAttributes('heading', { level: 1 })

// 更新标记 mark 属性
editor.commands.updateAttributes('highlight', { color: 'pink' })

下载教程 Demo

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