检查清单

此插件仅适用于付费版 TinyMCE 订阅。

Checklist 插件允许用户在其内容中添加复选框列表，以创建清单。

试用我们的 Checklist 演示

在 TinyMCE 编辑器中，清单以列表形式呈现，列表项旁边带有小型复选框。完成某个项目后，通过点击复选框，会在框中绘制一个小勾号或对号。

HTML

<textarea id="checklist">
  <ul class="tox-checklist">
    <li class="tox-checklist--checked">Try TinyMCE</li>
    <li class="tox-checklist--checked">Deploy TinyMCE</li>
    <li>Add the TinyMCE Checklist plugin</li>
    <li>Make more checklists!</li>
    </ul>
</textarea>

CSS

.tox-checklist > li:not(.tox-checklist--hidden) {
  list-style: none;
  margin: 0.25em 0;
  position: relative;
}
.tox-checklist > li:not(.tox-checklist--hidden)::before {
  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
  cursor: pointer;
  height: 1em;
  margin-left: -1.5em;
  margin-top: 0.125em;
  position: absolute;
  width: 1em;
}
.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before {
  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
}

JS

tinymce.init({
  selector: 'textarea#checklist',
  plugins: 'lists checklist',
  toolbar: 'checklist',
  height: 250,
  menu: {
    format: {
      title: 'Format',
      items: 'checklist | bold italic underline strikethrough superscript subscript codeformat | styles blocks fontfamily fontsize align | forecolor backcolor | removeformat'
    }
  },
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

创建清单

执行以下步骤以创建清单：

1. 将光标置于 TinyMCE 编辑器中的目标位置。

2. 点击工具栏上的 （Checklist 图标）或清单菜单项。会在目标位置添加一个复选框。

3. 输入第一个项目并按 Enter 键以添加另一个项目到列表中。

4. 通过点击列表中所需项目旁边的复选框，可以勾选该项目，添加一个对号。

结果

将创建一个清单。如果某些项目被选中，相邻的复选框中会出现一个对号。

切换清单项目

清单项目的对号状态可以切换为空或选中。通过点击复选框实现此操作。如果使用键盘，可以将光标置于所需的 Checklist 项目上，并按 Ctrl+Enter（Mac 用户按 Command+Enter）键组合来切换对号。

基本设置

要使用 Checklist 插件，需将 checklist 和 lists 添加到 plugins 列表，并将 checklist 添加到工具栏，例如：

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

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

Checklist 插件必须与 Lists 插件一起使用才能正常工作。

CSS

为使清单显示正确，请确保在页面上包含此 CSS：

.tox-checklist > li:not(.tox-checklist--hidden) {
  list-style: none;
  margin: 0.25em 0;
  position: relative;
}
.tox-checklist > li:not(.tox-checklist--hidden)::before {
  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
  cursor: pointer;
  height: 1em;
  margin-left: -1.5em;
  margin-top: 0.125em;
  position: absolute;
  width: 1em;
}
.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before {
  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
}

工具栏按钮

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

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

• toolbar 配置选项。

• quickbars_insert_toolbar 配置选项。

• 自定义上下文工具栏。

菜单项

Checklist 插件提供以下菜单项：

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

• menu 配置选项。

• contextmenu 配置选项。

• 自定义菜单工具栏按钮。