列表

最后更新：2026-11-04 10:10:15

lists 插件允许您向 TinyMCE 添加编号列表和项目符号列表。要启用列表样式（例如字母编号列表、方形项目符号），您还应启用 List Styles (advlist) 插件。

该插件还可规范不同浏览器间的列表行为。如果列表一致性存在问题，请启用此插件。

基本设置

tinymce.init({
  selector: 'textarea',  // 根据您的 HTML 更改此值
  plugins: 'lists',
  toolbar: 'numlist bullist'
});

有关使用模块打包器打包此插件的信息，请参阅打包 TinyMCE - 概述。

示例：将 `listprops` 菜单项添加到“工具”菜单

listprops 菜单项可打开“列表属性”对话框。

此对话框仅适用于编号列表。除非选区或插入点位于编号列表内，否则该菜单项将处于非活动状态。

tinymce.init({
  selector: 'textarea',  // 根据您的 HTML 更改此值
  plugins: 'lists',
  toolbar: 'bullist numlist',
  menu: { tools: { title: 'Tools', items: 'listprops' }},
});

选项

这些设置会影响 lists 插件的执行。

`lists_indent_on_tab`

此布尔选项可禁用 Tab 键缩进功能。其默认值为 true。

类型： Boolean

默认值： true

可能的值： true、false

示例：使用 `lists_indent_on_tab`

tinymce.init({
  selector: 'textarea',  // 根据您的 HTML 更改此值
  plugins: 'lists',
  toolbar: 'numlist bullist',
  lists_indent_on_tab: false
});

工具栏按钮

列表插件提供以下工具栏按钮：

工具栏按钮标识符	描述
`bullist`	将当前选区格式化为项目符号列表。
`numlist`	将当前选区格式化为编号列表。

可通过以下方式将这些工具栏按钮添加到编辑器：

菜单项

列表插件提供以下菜单项：

菜单项标识符	默认菜单位置	描述
`listprops`	不适用	打开“列表属性”对话框。仅适用于编号列表。

可通过以下方式将这些菜单项添加到编辑器：

menu 配置选项。
contextmenu 配置选项。
自定义菜单工具栏按钮。

命令

列表插件提供以下 TinyMCE 命令。

命令	描述
InsertDefinitionList	在编辑器中插入定义列表。
InsertOrderedList	在编辑器中插入有序列表。
InsertUnorderedList	在编辑器中插入无序列表。
mceListUpdate	更新列表属性或样式。
mceListProps	打开列表属性对话框。
RemoveList	从选区中移除列表元素。

示例

tinymce.activeEditor.execCommand('InsertDefinitionList', false, {
  'list-item-attributes': {class: 'mylistitemclass'},
  'list-attributes': {id: 'mylist'}
});
tinymce.activeEditor.execCommand('InsertOrderedList', false, {
  'list-style-type': 'decimal',
  'list-item-attributes': {class: 'mylistitemclass'},
  'list-attributes': {id: 'mylist'}
});
tinymce.activeEditor.execCommand('InsertUnorderedList', false, {
  'list-style-type': 'disc',
  'list-item-attributes': {class: 'mylistitemclass'},
  'list-attributes': {id: 'mylist'}
});
tinymce.activeEditor.execCommand('mceListUpdate', false, {
  styles: { 'background-color': 'powderblue' }
});
tinymce.activeEditor.execCommand('mceListUpdate', false, {
  attrs: { contenteditable: 'false' }
});
tinymce.activeEditor.execCommand('mceListProps');
tinymce.activeEditor.execCommand('RemoveList');

内联格式

列表项目符号和列表编号现在可以进行内联格式设置。

内联格式（也称为局部格式）是对对象的直接格式设置。它与因对象是特定类型而应用的格式形成对比。

从 TinyMCE 6.2 开始，所有行内格式选项的一个子集可以应用于列表项目符号和列表编号。

如果最终用户选择了列表项的全部内容并应用了行内格式——例如更改颜色或字体大小——那么这种局部格式也会应用到与该列表项关联的项目符号或编号上。

只有与选区关联的列表项目符号或列表编号会应用为该选区设置的行内格式。

如果应用了行内格式的选区是一个列表项（即选区从一个 <li> 标签延伸到其关联的 </li> 标签），那么与所选列表项关联的项目符号或编号会应用为该选区设置的行内格式。

如果选区是整个列表（即选区从列表的起始 <ol> 或 <ul> 标签延伸到结束 </ol> 或 </ul> 标签，或者选区从列表的第一个 <li> 标签延伸到最后一个 </li> 标签），那么每个项目符号或编号都会应用为该选区设置的行内格式。

如果在应用行内格式后，对已应用了行内格式的部分内容进行部分选择，并将该部分选择的行内格式移除，那么列表项目符号或列表编号的格式也会被移除。

PowerPaste Premium 插件支持

PowerPaste Premium 插件的用户应注意，此插件目前不支持具有行内格式的项目符号或列表编号。

当使用 PowerPaste 插件复制和粘贴此类内容时，应用于项目符号或列表编号的行内格式会丢失。

PowerPaste 一直支持应用于列表元素的行内格式，并且目前仍继续提供支持。

列表