Quick Toolbar 插件添加了三个上下文工具栏：

  • 快速选择工具栏 - 当选中文本时显示，提供格式设置按钮，如：bold、italic 和 link。

  • 快速插入工具栏 - 当添加新行时显示，提供插入表格和图像等对象的按钮。

  • 快速图像工具栏 - 当选中图像或图形时显示，提供图像格式设置按钮，如对齐选项。

此插件还添加了三个新的工具栏按钮：

  • 快速链接 - 一种无需对话框即可创建和编辑链接的内联表单。

  • 快速图像 - 提示用户选择本地图像以上传。

  • 快速表格 - 插入一个 2x2 表格，无需提示用户选择行数和列数。

交互示例

HTML

<h3>Quickbars 插件在 Classic (iframe) 编辑器中</h3>

<textarea id="iframe">
  <p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/tinymce/latest/_images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128"></p>
  <h4 style="text-align: center;">欢迎使用 TinyMCE Classic (iframe) 模式的 Quickbars 演示</h4>
  <p>要查看：</p>
  <ul>
    <li>将光标置于编辑器中空行的开头，以查看<strong>快速插入工具栏</strong>。</li>
    <li>选中（突出显示）编辑器中的任意文本，以查看<strong>快速选择工具栏</strong>。</li>
    <li>选中编辑器中的任意图像，以查看<strong>快速图像工具栏</strong>。</li>
  </ul>
</textarea>

<h3>Quickbars 插件在 inline 编辑器中</h3>

<div id="inline-distraction-free" class="my-inline-editor">
  <p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/tinymce/latest/_images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128"></p>
  <h4 style="text-align: center;">欢迎使用 TinyMCE Classic (iframe) 模式的 Quickbars 演示</h4>
  <p>要查看：</p>
  <ul>
    <li>将光标置于编辑器中空行的开头，以查看<strong>快速插入工具栏</strong>。</li>
    <li>选中（突出显示）编辑器中的任意文本，以查看<strong>快速选择工具栏</strong>。</li>
    <li>选中编辑器中的任意图像，以查看<strong>快速图像工具栏</strong>。</li>
  </ul>
</div>

CSS

.my-inline-editor:hover {
  box-shadow: 0 0 4px #1976D2;
  border-radius: 4px;
}
.my-inline-editor:focus {
  box-shadow: 0 0 4px #1976D2;
  border-radius: 4px;
}
.my-inline-editor {
  padding: 12px;
}

JS

tinymce.init({
  selector: 'textarea#iframe',
  plugins: 'quickbars table image link lists media autoresize help',
  toolbar: 'undo redo | blocks | bold italic | alignleft aligncentre alignright alignjustify | indent outdent | bullist numlist',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

tinymce.init({
  selector: 'div#inline-distraction-free',
  menubar: false,
  inline: true,
  plugins: [
    'autolink', 'autoresize', 'codesample', 'link', 'lists', 'media',
    'powerpaste', 'table', 'image', 'quickbars', 'codesample', 'help'
  ],
  toolbar: false,
  quickbars_insert_toolbar: 'quicktable image media codesample',
  quickbars_selection_toolbar: 'bold italic underline | blocks | bullist numlist | blockquote quicklink',
  contextmenu: 'undo redo | inserttable | cell row column deletetable | help',
  powerpaste_word_import: 'clean',
  powerpaste_html_import: 'clean',
});

基本设置

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

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

禁用特定的快速工具栏

以下示例展示了如何在不需要快速工具栏的编辑器中禁用特定的快速工具栏。

示例：禁用快速插入上下文工具栏

tinymce.init({
  selector: 'textarea', // 根据你的 HTML 更改此值
  plugins: 'quickbars',
  quickbars_insert_toolbar: false
});

示例：禁用快速选择上下文工具栏

tinymce.init({
  selector: 'textarea', // 根据你的 HTML 更改此值
  plugins: 'quickbars',
  quickbars_selection_toolbar: false
});

示例：禁用快速图像上下文工具栏

tinymce.init({
  selector: 'textarea', // 根据你的 HTML 更改此值
  plugins: 'quickbars',
  quickbars_image_toolbar: false
});

插件特定的工具栏按钮

快速链接

快速链接（quicklink）工具栏按钮允许用户快速内联插入/编辑链接。默认情况下，它包含在快速选择上下文工具栏中，也可以在其他上下文工具栏中使用。

示例：在自定义上下文工具栏中使用 quicklink

tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  plugins: 'quickbars link',
  setup: (editor) => {
    editor.ui.registry.addContextToolbar('paragraphlink', {
      predicate: (node) => {
        return node.nodeName.toLowerCase() === 'p';
      },
      items: 'quicklink',
      position: 'node'
    });
  }
});

快速图像

“快速图像”（quickimage）工具栏按钮允许用户从其计算机快速将图像插入到编辑器中。默认情况下，它包含在“快速插入”上下文工具栏中，并且可以在其他工具栏中使用。

要在插入时启用图像自动上传，必须配置图像上传。

示例：在编辑器工具栏中使用 quickimage

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

快速表格

“快速表格”（quicktable）工具栏按钮插入一个宽度为 100% 的 2x2 表格。默认情况下，它包含在“快速插入”上下文工具栏中，并且可以在其他工具栏中使用。

示例：在编辑器工具栏中使用 quicktable

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

选项

quickbars_selection_toolbar

quickbars_selection_toolbar 选项配置由 quickbars 插件提供的“快速选择”工具栏。要更改“快速选择”工具栏上的按钮，请提供一个以空格分隔的工具栏按钮名称字符串。“快速选择”工具栏旨在用于与内容格式相关的按钮，但也允许使用任何TinyMCE 工具栏按钮或自定义工具栏按钮。

要禁用“快速选择”工具栏，请将 quickbars_selection_toolbar 设置为 false。

类型： String

默认值： 'bold italic | quicklink h2 h3 blockquote'

示例：自定义“快速选择”工具栏

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'quickbars',
  quickbars_selection_toolbar: 'bold italic | blocks | quicklink blockquote'
});

示例：禁用“快速选择”工具栏

要禁用“快速选择”工具栏，请将 quickbars_selection_toolbar 设置为 false。

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

quickbars_insert_toolbar

quickbars_insert_toolbar 选项配置由 quickbars 插件提供的“快速插入”工具栏。要更改“快速插入”工具栏上的按钮，请提供一个以空格分隔的工具栏按钮名称字符串。“快速插入”工具栏旨在用于与插入内容相关的按钮，但也允许使用任何TinyMCE 工具栏按钮或自定义工具栏按钮。

要禁用“快速插入”工具栏，请将 quickbars_insert_toolbar 设置为 false。

类型： String

默认值： 'quickimage quicktable'

示例：自定义“快速插入”工具栏

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'quickbars pagebreak',
  quickbars_insert_toolbar: 'quickimage quicktable | hr pagebreak'
});

示例：禁用“快速插入”工具栏

要禁用“快速插入”工具栏，请将 quickbars_insert_toolbar 设置为 false。

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

quickbars_image_toolbar

quickbars_image_toolbar 选项配置由 quickbars 插件提供的“快速图像”工具栏。要更改“快速图像”工具栏上的按钮，请提供一个以空格分隔的工具栏按钮名称字符串。“快速图像”工具栏旨在用于与图像相关的按钮，但也允许使用任何TinyMCE 工具栏按钮或自定义工具栏按钮。

要禁用“快速图像”工具栏，请将 quickbars_image_toolbar 设置为 false。

类型： String 或 false

默认值： 'alignleft aligncenter alignright'

示例：自定义“快速图像”工具栏

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'quickbars image editimage',
  quickbars_image_toolbar: 'alignleft aligncenter alignright | rotateleft rotateright | imageoptions'
});

示例：禁用快速图像工具栏

要禁用快速图像工具栏，请将 quickbars_image_toolbar 设置为 false。

tinymce.init({
  selector: 'textarea',  // 根据实际HTML调整此值
  plugins: 'quickbars',
  quickbars_image_toolbar: false
});

工具栏按钮

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

工具栏按钮标识符说明

quickimage

插入本地机器中的图像。

quicklink

以更快捷的方式插入链接。

quicktable

插入2x2的表格。

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