advlist 插件通过向核心的 bullist 和 numlist 工具栏控件添加 CSS list-style-type 样式的数字格式和项目符号类型，扩展了这些控件的功能。

若要使 advlist 插件正常工作，必须激活 列表（lists）插件。
从 TinyMCE 7.0 起，高级列表插件已重命名为列表样式（List Styles）。在编辑器中添加列表样式时，请继续使用 advlist。

基本设置

tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  plugins: 'lists advlist'
});

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

交互式演示

HTML

<textarea id="advlist-demo">
    <h2>高级列表样式演示</h2>
    
    <h3>基本项目符号列表</h3>
    <p>尝试使用工具栏或高亮文本更改这些项目符号样式，并从上下文工具栏更改列表样式：</p>
    <ul>
        <li>默认项目符号样式</li>
        <li>另一个具有默认样式的项目</li>
        <li>用于演示的第三个项目</li>
    </ul>

    <h3>不同样式的编号列表</h3>
    <p>尝试使用不同的编号格式：</p>
    <ol>
        <li>流程的第一步</li>
        <li>包含更多细节的第二步</li>
        <li>完成序列的第三步</li>
    </ol>

    <h3>嵌套列表（缩进）</h3>
    <p>通过缩进项目创建嵌套列表：</p>
    <ul>
        <li>主类别
            <ul>
                <li>子类别项目 1</li>
                <li>子类别项目 2</li>
            </ul>
        </li>
        <li>另一个主类别
            <ol>
                <li>编号子项目 1</li>
                <li>编号子项目 2</li>
            </ol>
        </li>
    </ul>

    <h3>混合内容列表</h3>
    <p>列表可以包含各种内容类型：</p>
    <ul>
        <li><strong>列表项中的粗体文本</strong></li>
        <li><em>用于强调的斜体文本</em></li>
        <li>包含 <a href="#">链接</a> 的文本</li>
        <li>带有 <code>内联代码</code> 片段的项目</li>
    </ul>

    <h3>项目规划示例</h3>
    <ol>
        <li>项目设置
            <ul>
                <li>初始化仓库</li>
                <li>安装依赖项</li>
                <li>配置构建工具</li>
            </ul>
        </li>
        <li>开发阶段
            <ol>
                <li>创建线框图</li>
                <li>实现核心功能</li>
                <li>添加用户界面元素</li>
            </ol>
        </li>
        <li>测试与部署
            <ul>
                <li>单元测试</li>
                <li>集成测试</li>
                <li>生产环境部署</li>
            </ul>
        </li>
    </ol>
</textarea>

JS

tinymce.init({
    selector: '#advlist-demo',
    plugins: [
        'advlist', 'anchor', 'autolink', 'charmap', 'code', 'fullscreen',
        'help', 'image', 'insertdatetime', 'link', 'lists', 'media',
        'preview', 'searchreplace', 'table', 'visualblocks', 'wordcount'
    ],
    toolbar: 'undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | code | fullscreen | help',
    menubar: 'file edit view insert format tools table help',
    height: 600,

    setup: (editor) => {
      editor.ui.registry.addContextToolbar('textselection', {
        predicate: () => !editor.selection.isCollapsed(),
        items: 'bullist numlist',
        position: 'selection', // 'selection' | 'node' | 'line'
        scope: 'node'
      });
    }
});

选项

这些设置通过提供对列表样式的更细粒度控制，影响 advlist 插件的执行。

advlist_bullet_styles

此选项允许您在默认的 bullist 工具栏控件中包含特定的无序列表项标记。

类型：String

默认值：'default,circle,square'

可能的值：

  • default：浏览器的默认样式

  • circle：空心圆

  • disc：实心圆

  • square：实心正方形

示例：使用 advlist_bullet_styles

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'lists advlist',
  toolbar: 'bullist',
  advlist_bullet_styles: 'square'  // only include square bullets in list
});

advlist_number_styles

此选项允许您在默认的 numlist 工具栏控件中包含特定的有序列表项标记。

类型：String

默认值： 'default,lower-alpha,lower-greek,lower-roman,upper-alpha,upper-roman'

可能的值：

  • default：浏览器的默认样式

  • lower-alpha：小写 ASCII 字母，例如 a, b, c, …​ z

  • lower-greek：小写古典希腊字母（alpha, beta, gamma），例如 α, β, γ …​

  • lower-roman：小写罗马数字，例如 i, ii, iii, iv, v …​

  • upper-alpha：大写 ASCII 字母，例如 A, B, C, …​ Z

  • upper-roman：大写罗马数字，例如 I, II, III, IV, V …​

示例：使用 advlist_number_styles

tinymce.init({
  selector: 'textarea',  // 根据需要更改此值以匹配你的 HTML
  plugins: 'lists advlist',
  toolbar: 'numlist',
  advlist_number_styles: 'lower-alpha'  // 仅在列表中使用小写字母
});

工具栏按钮

List Styles 插件提供以下工具栏按钮：

工具栏按钮标识符描述

bullist

将当前选中的内容格式化为带有不同项目符号样式（disc, circle, square）下拉选项的项目符号列表。

numlist

将当前选中的内容格式化为带有不同数字样式（decimal, alpha, roman, greek）下拉选项的数字列表。

List Styles 插件通过添加允许用户从不同列表样式中选择的下拉箭头，扩展了核心 bullist 和 numlist 工具栏按钮。这些按钮由核心 lists 插件提供，但下拉功能是由 List Styles 插件添加的。

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

菜单项

List Styles 插件提供以下菜单项：

菜单项标识符默认菜单位置描述

bullist

格式

将当前选中的内容格式化为带有不同项目符号样式下拉选项的项目符号列表。

numlist

格式

将当前选中的内容格式化为带有不同数字样式下拉选项的数字列表。

List Styles 插件通过添加允许用户从不同列表样式中选择的下拉功能，扩展了 格式 菜单中的核心列表菜单项。这些菜单项由核心 lists 插件提供，但下拉功能是由 List Styles 插件添加的。

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

命令

List Styles 插件提供以下 TinyMCE 命令。

命令描述

ApplyOrderedListStyle

将当前选中的内容转换为有序列表。接受一个指定列表类型的对象。

ApplyUnorderedListStyle

将当前选中的内容转换为无序列表。接受一个指定列表类型的对象。

有关可用列表类型的信息，请参见：MDN Web 文档 - list-style-type。

示例

tinymce.activeEditor.execCommand('ApplyOrderedListStyle', false, {
  'list-style-type': 'decimal'
});
tinymce.activeEditor.execCommand('ApplyUnorderedListStyle', false, {
  'list-style-type': 'disc'
});

内联格式

现在，列表项目符号和列表数字可以进行内联格式化。

内联格式（也称为点格式）是对对象的直接格式化。它与由于对象是特定类型而应用于对象的格式相反。

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

如果最终用户选中列表项的全部内容并应用内联格式（如颜色更改或字体大小更改），则此点格式也会应用于与该列表项关联的项目符号或数字。

只有与所选内容关联的列表项目符号或列表数字才会应用所选内容的内联格式。

如果应用了内联格式的所选内容是一个列表项（即如果所选内容从一个 <li> 标签运行到与其关联的 </li> 标签），则与所选列表项关联的项目符号或数字将应用所选内容的内联格式。

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

如果在应用内联格式后，对已应用内联格式的部分内容进行选区操作，并且从该部分选区中移除所述内联格式，那么列表项目符号或列表编号的格式也将被移除。

PowerPaste Premium插件支持

使用PowerPaste Premium插件的用户应注意，目前该插件不支持内联格式的项目符号或列表编号。

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

对列表元素应用的内联格式一直受PowerPaste支持，并且仍将继续支持。