tiptap lists 命令

tiptap lists 命令相关的命令列表以及对应的用法，比如liftListItem 提升列的项、sinkListItem 降级列的项、splitListItem 拆分列的项等等。

liftListItem

尝试将列的项提升到包裹列的同级

editor.commands.liftListItem();

/*
The  liftListItem will try to lift the list item around the current selection up into a wrapping parent list.
 
如果编辑器内容如下
<ul><li><p>aaaa</p></li><li><p>bbbb</p></li></ul>
执行命令
editor.commands.liftListItem('listItem')
执行后编辑器内容如下
<p>aaaa</p><ul><li><p>bbbb</p></li></ul>
*/

sinkListItem

将列选中选中的项降级到下一级列

editor.commands.sinkListItem();

/* 
如果编辑器内容如下
<ul><li><p>aaaa</p></li><li><p>bbbb</p></li></ul>
执行命令
editor.commands.sinkListItem('listItem')
执行后编辑器内容如下
<ul><li><p>aaaa</p><ul><li><p>bbbb</p></li></ul></li></ul>
*/

splitListItem

将列选中选中的项拆分成两项目

editor.commands.splitListItem();

/* 
如果编辑器内容如下
<ul><li><p>aaaa</p></li></ul>
执行命令
editor.commands.splitListItem('listItem')
执行后编辑器内容如下
<ul><li><p>aaa</p></li><li><p>a</p></li></ul>
*/

toggleList

将选中选中列的类型转换成另外一种列类型

editor.commands.toggleList('listType1','listType2');

/* 
如果编辑器内容如下
<ul><li><p>www.itxst.com</p></li></ul>
执行命令
editor.commands.toggleList('orderedList','listItem')
执行后编辑器内容如下 
<ol><li><p>www.itxst.com</p></li></ol>
*/

wrapInList

将选中内容的节点包裹在list列中

editor.commands.wrapInList();

/* 
如果编辑器内容如下
<p>abc</p>
执行命令
editor.commands.wrapInList('orderedList')
执行后编辑器内容如下
<ol><li><p>abc</p></li></ol>
*/

下载教程 Demo

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