tiptap selection 命令

tiptap selection 相关的命令focus、selectAll、deleteSelection等和焦点相关的命令、选择相关的命令。

blur

blur将焦点从tiptap编辑器中移除。

// Remove the focus from the editor
editor.commands.blur()

deleteRange

deleteRange删除指定范围内的内容，参数Range。

// Delete a given range.
editor.commands.deleteRange({ from: 0, to: 10 })

deleteSelection

deleteSelection删除选中的内容。

// The deleteSelection command deletes the currently selected nodes
editor.commands.deleteSelection()

enter

enter触发一个"Enter"（键盘回车）命令。

// The enter command triggers an enter programmatically.
editor.commands.enter()

focus

focus设置编辑器焦点，你可以设置光标位置。
参数：

position 'start' | 'end' | 'all' | number | boolean | null (false)
options { scrollIntoView: boolean }

// 设置编辑器获得焦点
editor.commands.focus()

// 设置光标位于编辑器开始位置
editor.commands.focus('start')

// 设置光标位于编辑器结尾位置
editor.commands.focus('end')

// 选中全部文档
editor.commands.focus('all')

// 设置光标位于第6个字符位置
editor.commands.focus(6)

// 设置光标位于结尾位置，但是滚动条不滚动到结尾（当内容高度大于编辑器高度有滚动条时）
editor.commands.focus('end',{scrollIntoView:true})

keyboardShortcut

keyboardShortcut触发快捷键命令。

/*
 The keyboardShortcut command will try to trigger a ShortcutEvent with a given name.
*/
editor.commands.keyboardShortcut('undo')

scrollIntoView

scrollIntoView滚动到选中位置或光标位置。

/*
 scrollIntoView scrolls the view to the current selection or cursor position.
*/
editor.commands.scrollIntoView()

selectAll

selectAll选中全部文档。

//选中全部文档，然后设置获取焦点
editor.commands.selectAll();
state.editor.commands.focus();

selectNodeBackward

如果选择为空，并且位于文本块的开头，selectNodeBackward将尽可能地选择当前文本块之前的节点。

/*
If the selection is empty and at the start of a textblock, 
selectNodeBackward will select the node before the current textblock if possible.
*/
editor.commands.selectNodeBackward();

selectNodeForward

如果选择为空，在文本块的末尾，selectNodeForward将尽可能选择当前文本块之后的节点。

/*
 If the selection is empty and at the end of a textblock,
 selectNodeForward will select the node after the current textblock if possible.
*/
editor.commands.selectNodeBackward()

selectParentNode

selectParentNode将尝试获取当前选定节点的父节点，并将所选内容移动到该节点。

/*
selectParentNode will try to get the parent node of the currently selected
 node and move the selection to that node.
*/
editor.commands.selectParentNode();
//执行selectParentNode后插入内容看看效果
editor.commands.insertContent('www.itxst.com')

setNodeSelection

setNodeSelection在指定位置创建一个新的选择区。

/*
 setNodeSelection creates a new NodeSelection at a given position
*/
editor.commands.setNodeSelection(6);

//vue3 例子
const state = reactive({
  editor: new Editor({
    content:  `<p>123456</p><p>abcd</p>`,
    extensions: [
      StarterKit  
    ],  
  }) as any,
  result:''
});

const done = () => {
  // 这里换成3或10执行一下 可以对比效果
  let res = state.editor.commands.setNodeSelection(10);
  //插入内容看看效果
  state.editor.commands.insertContent('www.itxst.com')
}

setTextSelection

setTextSelection设置选中指定文本。

/*
 If you think of selection in the context of an editor,
 you’ll probably think of a text selection. 
 With setTextSelection you can control that text selection and set it to a specified range or position.
*/

// 设置光标在第10个字符位置
editor.commands.setTextSelection(10);
editor.commands.focus();

// 选中位置从1到3的字符
editor.commands.setTextSelection({ from: 1, to: 3 });
editor.commands.focus();

下载教程 Demo

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