手风琴

Accordion 插件允许在文档中创建可展开或折叠的章节，以显示或隐藏额外内容。

交互式示例

HTML

<textarea id="accordion">

  <p><img style="display: block; margin-left: auto; margin-right: auto;" title="小Logo" src="https://www.tiny.cloud/docs/tinymce/latest/_images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128"></p>

  <h1 style="text-align: center;">Accordion 插件</h1>

  <p>这是<strong>Accordion</strong>开源插件的演示。</p>

  <details class="mce-accordion">
    <summary><strong>Accordion</strong>插件有什么作用？</summary>
      <p>Accordion 插件允许在文档中创建可折叠的章节，这些章节可以展开或折叠以显示或隐藏额外内容。</p>
  </details>

  <details class="mce-accordion">
    <summary>它在终端用户面前如何呈现？</summary>
      <p>默认情况下，当<code>accordion</code>插件加载时，该命令可以在 TinyMCE 菜单的<strong>Insert → Accordion</strong>中找到。</p>
      <p>在 TinyMCE 配置中将<code>accordion</code>添加到<code>toolbar</code>会在 TinyMCE 工具栏中添加一个 Accordion 图标。</p>
      <p>而且，当选择特定的可折叠章节时，会弹出一个菜单提供两个控件：一个用于折叠或展开所选章节；另一个用于删除所选章节。</p>
  </details>

  <details class="mce-accordion">
    <summary>还有其他 Accordion 选项吗？</summary>
      <p>Accordion 插件提供：<br />
         四个命令（<code>InsertAccordion</code>、<code>ToggleAccordion</code>、<code>ToggleAllAccordions</code> 和<code>RemoveAccordion</code>）；以及<br />
         两个初始化选项（<code>details_initial_state</code> 和<code>details_serialized_state</code>）。</p>
      <p>详见下文</p>
  </details>

  <h2>有问题或需要帮助？</h2>

  <ul>
    <li>我们的<a href="https://www.tiny.cloud/docs/tinymce/8/">文档</a>是学习如何配置 TinyMCE 的绝佳资源。</li>
    <li>有具体问题？试试<a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener">Stack Overflow 上的<code>tinymce</code>标签</a>。</li>
    <li>作为<a href="https://www.tiny.cloud/pricing">TinyMCE 高级计划</a>的一部分，我们还提供企业级支持。</li>
  </ul>

  <h2>发现了错误？</h2>

  <p>如果您认为发现了错误，请在<a href="https://github.com/tinymce/tinymce/issues">GitHub 仓库</a>上创建一个问题，向开发人员报告。</p>

  <h2>最后……</h2>

  <p>您的应用需要文件上传功能吗？考虑将<a href="https://www.tiny.cloud/docs/tinymce/latest/uploadcare/" target="_blank" rel="noopener noreferrer">Uploadcare</a>与 TinyMCE 结合使用，以获得快速、现代的上传体验。</p>

  <p>感谢您支持 TinyMCE。我们希望它能帮助您创建出色的内容。</p>

  <p>来自 TinyMCE 团队的最诚挚的问候。</p>
</textarea>

JS

tinymce.init({
  selector: 'textarea#accordion',
  plugins: [
    "advlist", "anchor", "autolink", "charmap", "code", "fullscreen", 
    "help", "image", "insertdatetime", "link", "lists", "media", 
    "preview", "searchreplace", "table", "visualblocks", "accordion"
    ],
  height: 1200,
  toolbar: "undo redo |link image accordion | styles | bold italic underline strikethrough | align | bullist numlist",
});

基本设置

要将 Accordion 插件添加到编辑器，请在编辑器配置的plugins选项中添加accordion。

要将 Accordion 工具栏图标添加到 TinyMCE 工具栏，请在编辑器配置的toolbar选项中添加accordion。

例如：

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

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

选项

以下配置选项影响 Accordion 插件的行为。

details_initial_state

此选项设置 Accordion 章节的状态

• 在创建时；以及

• 在编辑器加载时已经存在时。

当设置为collapsed时，所有 Accordion 在创建和编辑器加载时都会呈现为关闭状态。

当设置为expanded时，所有 Accordion 在创建和编辑器加载时都会呈现为打开状态。

当设置为inherited时，Accordion 保留其各自的状态，并在创建时呈现为打开状态。

此选项的默认值是inherited。

类型： String

默认值： '+inherited+'

可能的值： '+inherited+'、'+collapsed+'、'+expanded+'

示例：使用details_initial_state将所有创建的 Accordion 章节默认呈现为关闭状态

tinymce.init({
  selector: 'textarea',  // 根据您的 HTML 更改此值
  plugins: accordion
  details_initial_state: 'collapsed'
});

示例：使用 details_initial_state 在新 TinyMCE 文档中预设 <details> 内容为展开状态

tinymce.init({
  selector: 'textarea',  // 根据您的 HTML 更改此值
  newdocument_content: '<details><summary>Accordion summary...</summary><p>Accordion body...</p></details>',
  details_initial_state: 'expanded',
});

此选项不需要加载 Accordion 插件即可生效。

在上述示例中，当选择File → New document（文件 → 新建文档）时，newdocument_content 选项会将一个 <details> 元素插入新的编辑器实例，而 details_initial_state 选项会使该元素呈现为展开状态。

details_serialized_state

此选项用于设置 TinyMCE 实例保存内容时 Accordion 部分的状态。

当设置为 collapsed 时，所有 Accordion 在内容保存时都会被设为关闭。

当设置为 expanded 时，所有 Accordion 在内容保存时都会被设为展开。

当设置为 inherited 时，Accordion 在内容保存时会保留各自的状态。

此选项的默认值为 inherited。

类型：String

默认值：'+inherited+'

可能的值：'+inherited+'，'+collapsed+'，'+expanded+'

示例：使用 details_serialized_state 在内容保存时关闭所有 Accordion

tinymce.init({
  selector: 'textarea',  // 根据您的 HTML 更改此值
  details_serialized_state: 'collapsed',
});

示例：使用 details_serialized_state 在新 TinyMCE 文档中将预设的 <details> 内容保存为关闭状态

tinymce.init({
  selector: 'textarea',  // 根据您的 HTML 更改此值
  plugins: 'preview', // 在此示例中添加此插件用于 UX 演示；请参阅下方的注意事项
  newdocument_content: '<details><summary>Accordion summary...</summary><p>Accordion body...</p></details>',
  details_initial_state: 'expanded',
  details_serialized_state: 'collapsed',
});

此选项不需要加载 Accordion 插件即可生效。

在上述示例中，当选择File → New document（文件 → 新建文档）时，newdocument_content 选项会将一个 <details> 元素插入新的编辑器实例。

details_initial_state 选项会使该元素呈现为展开状态，而 details_serialized_state 会将保存的内容状态设置为关闭。

此示例还演示了一个潜在的 UX 问题，即实际上设置了相互冲突的 details_initial_state 和 details_serialied_state。选择File → New document（文件 → 新建文档）会产生一个新的编辑器实例，其中包含一个由 details_initial_state 设置为展开状态的 Accordion 元素。

选择File → Preview（文件 → 预览）会显示同一新创建的文档，但其中的 Accordion 元素为关闭状态，这是由 details_serialized_state 设置的。

鉴于选项值的不同，这种差异是预料之中的。然而，对于某些最终用户来说，这可能会被视为一种 UX 不一致的情况。

工具栏按钮

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

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

• toolbar 配置选项。

• quickbars_insert_toolbar 配置选项。

• 自定义上下文工具栏。

菜单项

Accordion 插件提供以下菜单项：

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

• menu 配置选项。

• contextmenu 配置选项。

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

命令

Accordion 插件提供以下 TinyMCE 命令。

// 在当前位置插入一个手风琴分区
tinymce.activeEditor.execCommand('InsertAccordion');

// 将当前位置的手风琴设置为打开状态
tinymce.activeEditor.execCommand('ToggleAccordion', false, true);

// 将当前文档中的所有手风琴设置为关闭状态
tinymce.activeEditor.execCommand('ToggleAllAccordions', false, false);

// 删除当前位置的手风琴
tinymce.activeEditor.execCommand('RemoveAccordion');

事件

Accordion 插件提供以下事件。

Accordion 插件提供以下事件。