选项

基本工具栏选项

toolbar

此选项允许您指定 按钮 及其在 TinyMCE 工具栏上的显示顺序。

分组工具栏按钮

要指定显示在 TinyMCE 工具栏上的按钮，应为 toolbar 选项提供一个以空格分隔的 工具栏按钮 列表。若要在此列表中创建分组，请在要创建的按钮组之间添加 | 竖线字符。

类型： String

分组工具栏示例

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'undo redo | styles | bold italic | link image'
});

当 toolbar_mode 设置为 'floating'（默认值）或 'sliding' 时，工具栏分组的大小会影响工具栏抽屉的行为。欲了解更多信息，请参阅：toolbar_mode 选项。

添加工具栏组标签

要为显示在 TinyMCE 工具栏上的分组按钮指定标签，应为 toolbar 选项提供一个对象数组，其中每个对象包含 name 和 items 属性。name 应该是一个字符串值，将作为包含工具栏组的 div 的 title 属性。items 应该是一个字符串数组，表示应在特定工具栏组中显示的按钮。

类型： Array

示例：添加工具栏组标签

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: [
    { name: 'history', items: [ 'undo', 'redo' ] },
    { name: 'styles', items: [ 'styles' ] },
    { name: 'formatting', items: [ 'bold', 'italic' ] },
    { name: 'alignment', items: [ 'alignleft', 'aligncenter', 'alignright', 'alignjustify' ] },
    { name: 'indentation', items: [ 'outdent', 'indent' ] }
  ]
});

禁用工具栏

要禁用工具栏，应将 toolbar 选项设为布尔值 false。

类型： Boolean

默认值： true

可能的值： true，false

示例：禁用工具栏

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

使用多个工具栏

要指定多个工具栏，应为 toolbar 选项提供一个包含以空格分隔的字符串的数组。

类型： Array

示例：添加多个工具栏

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: [
    'undo redo | styles | bold italic | link image',
    'alignleft aligncenter alignright'
  ]
});

此外，您还可以使用 toolbar(n) 选项来指定多个工具栏。

toolbar(n)

此选项允许您指定按钮及其在多个工具栏实例上的显示顺序。

类型： String

示例：使用 toolbar(n)

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  toolbar1: 'undo redo | styles | bold italic | link image',
  toolbar2: 'alignleft aligncenter alignright'
});

详细信息请参阅工具栏配置选项。

toolbar_groups

toolbar_groups 选项用于创建一个工具栏按钮，该按钮将其他工具栏按钮显示为弹出式工具栏集合。所显示工具栏的样式取决于当前的工具栏模式。例如，如果将 toolbar_mode 设置为 floating，工具栏组弹出窗口将显示为浮动式货架。

toolbar_groups 功能仅在 floating 工具栏模式下受支持。如果将 toolbar_groups 选项与其他工具栏模式一起使用，则不会显示工具栏组按钮，且会在控制台中打印警告消息。

此选项接受一个对象，将按钮名称映射到组配置。有关配置工具栏组的详细信息，请参阅：group toolbar button configuration。

类型： Object

示例：使用 toolbar_groups

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'formatting | alignleft aligncenter alignright',
  toolbar_groups: {
    formatting: {
      icon: 'bold',
      tooltip: 'Formatting',
      items: 'bold italic underline | superscript subscript'
    }
  }
});

主编辑器工具栏行为

toolbar_mode

toolbar_mode 选项用于扩展工具栏以容纳溢出的工具栏按钮。此选项适用于小屏幕或小型编辑器框架。

当 toolbar_mode 设置为 'floating' 或 'sliding' 时，编辑器将根据以下因素将工具栏按钮移动到工具栏抽屉中：

• 定义的工具栏分组。

• 编辑器的宽度。

例如，如果以下工具栏配置比编辑器宽，则分隔符 (|) 前面的项目将显示在主工具栏中，其余项目将移至工具栏抽屉。

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'undo redo styles bold italic alignleft aligncenter alignright alignjustify | bullist numlist outdent indent'
});

组织工具栏时需要考虑两种情况：

• 当存在两个或多个工具栏按钮组时，主工具栏将在编辑器宽度范围内显示尽可能多的完整、连续的工具栏按钮组。任何剩余的工具栏按钮组都将移至工具栏抽屉。

• 如果第一个工具栏按钮组比编辑器宽，整个工具栏将显示在工具栏抽屉中。

使用多个工具栏或 toolbar(n) 选项时，工具栏模式不可用。

类型： String

默认值： 'floating'

可能的值： 'floating'、'sliding'、'scrolling' 或 'wrap'

此选项的默认值在移动设备上有所不同。有关默认移动选项的信息，请参阅：TinyMCE Mobile — Configuration options with mobile defaults。

模式

工具栏模式在 tinymce.init 中指定。有四种工具栏模式：

• Floating（浮动）

• Sliding（滑动）

• Scrolling（滚动）

• Wrap（换行）

Floating（浮动）

如果将 toolbar_mode 配置为 floating，当点击工具栏溢出图标 时，工具栏将以浮动架的形式显示在工具栏溢出图标下方。

配置浮动工具栏

使用以下设置来配置浮动工具栏：

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

Sliding（滑动）

如果将 toolbar_mode 配置为 sliding，当点击工具栏溢出图标 时，工具栏将作为固定工具栏显示在第一个工具栏下方。

配置滑动工具栏

使用以下设置来配置滑动工具栏：

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

Scrolling（滚动）

滚动工具栏模式适用于触摸屏设备。

如果将 toolbar_mode 配置为 scrolling，溢出工具栏按钮将保留在工具栏上，但会隐藏在视图之外。要访问溢出工具栏按钮，请滚动工具栏。在触摸屏上滚动工具栏，请使用滑动操作。在桌面设备上滚动，请按住 Shift 键并使用鼠标滚动。

在桌面设备和桌面模式下的混合设备上，工具栏上将显示滚动条。

配置滚动工具栏

使用以下设置来配置滚动工具栏：

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

Wrap（换行）

如果将 toolbar_mode 配置为 wrap，溢出工具栏按钮将显示在主工具栏下方的一个或多个工具栏上。

配置换行工具栏

使用以下设置来配置换行工具栏：

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

toolbar_location

toolbar_location 选项用于定位工具栏和menubar。默认行为是将工具栏和菜单栏放置在内容区域上方。将此选项设置为 bottom 可将工具栏和菜单栏放置在内容区域下方。此选项在经典编辑器 (Iframe) 模式和内联模式下有效。

将此选项设置为 auto，工具栏和菜单栏将放置在：

• 默认情况下在内容区域上方。

• 如果上方没有足够的空间显示工具栏和菜单栏，则在内容区域下方。

类型： String

默认值： 'auto'

可能的值： 'auto'、'top'、'bottom'

示例：使用 toolbar_location

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  toolbar_location: 'bottom'
});

toolbar_sticky

固定工具栏（或停靠工具栏），在向下滚动网页时，将工具栏和菜单停靠在屏幕顶部，直到编辑器不再可见。

若要启用 Sticky Toolbars，请在 tinymce.init 脚本中将 toolbar_sticky 设置为 true。若要禁用 Sticky Toolbars，请将 toolbar_sticky 设置为 false。在 inline 模式下，sticky toolbars 始终处于启用状态，无法禁用。

若要查看 sticky toolbar 的演示，请参阅 TinyMCE Sticky Toolbar Demo。

类型： Boolean

默认值：在 classic 模式下为 false，在 inline 模式下为 true

可能的值： true、false

仅当 TinyMCE 在 classic 模式下运行时才支持此功能。在 inline 模式下不支持。有关编辑模式之间差异的更多信息，请参阅 Classic editing mode。

此选项在移动设备上的默认值有所不同。有关移动设备默认选项的信息，请参阅：TinyMCE Mobile — Configuration options with mobile defaults。

示例：使用 toolbar_sticky

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

toolbar_sticky_offset

此选项允许工具栏根据其位置 (toolbar_location)，从 viewport 的顶部或底部以指定的偏移量固定或停靠。当网站具有 sticky header navigation bar 时，此选项非常有用，可让 TinyMCE 工具栏“固定”在网站的导航栏下方。此选项接受以像素为单位的高度值。

此选项需要将 toolbar_sticky 选项设置为 true 才能生效。

类型： Number

默认值： 0

示例：使用 toolbar_sticky_offset

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar_sticky: true,
  toolbar_sticky_offset: 100
});

Persistent inline editor toolbar options

toolbar_persist

仅当 TinyMCE 在 inline 模式下运行时才支持此功能。在 classic 模式下不支持。有关编辑模式之间差异的更多信息，请参阅 Inline editing mode。

此选项禁用 inline editors 的工具栏和菜单栏的自动显示和隐藏行为。启用此选项后，工具栏和菜单栏将始终显示，并且在失去焦点时不会隐藏。使用此选项可以使工具栏和菜单栏在 inline editors 中保持持久显示。

类型： Boolean

默认值： false

可能的值： true、false

示例

tinymce.init({
  selector: 'div',  // change this value according to your HTML
  inline: true,
  toolbar_persist: true
});

fixed_toolbar_container

仅当 TinyMCE 在 inline 模式下运行时才支持此功能。在 classic 模式下不支持。有关编辑模式之间差异的更多信息，请参阅 Inline editing mode。

使用此选项可以将 inline toolbar 渲染到固定定位的 HTML 元素中。例如，您可以将工具栏固定在浏览器 viewport 的顶部。

类型： String

示例：使用 fixed_toolbar_container

此示例采用名为 '#mytoolbar' 的 CSS 3 选择器，并将任何 inline toolbars 渲染到此元素中。

tinymce.init({
  selector: 'div',  // change this value according to your HTML
  inline: true,
  fixed_toolbar_container: '#mytoolbar'
});

fixed_toolbar_container_target

仅当 TinyMCE 在 inline 模式下运行时才支持此功能。在 classic 模式下不支持。有关编辑模式之间差异的更多信息，请参阅 Inline editing mode。

使用此选项可以通过直接将 HTMLElement 传递给选项，将 inline toolbar 渲染到固定定位的 HTML 元素中。此选项类似于接受 CSS 选择器的 fixed_toolbar_container 选项。

fixed_toolbar_container 的优先级高于 fixed_toolbar_container_target，因此要使 fixed_toolbar_container_target 生效，请勿使用 fixed_toolbar_container 选项。

类型： HTMLElement

示例：使用 fixed_toolbar_container_target

const el = document.createElement('div');
document.body.appendChild(el);

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  inline: true,
  fixed_toolbar_container_target: el
});

Contextual (content-specific) toolbars

quickbars_selection_toolbar

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

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

类型：String

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

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

tinymce.init({
  selector: 'textarea',  // 根据你的 HTML 更改此值
  plugins: 'quickbars',
  quickbars_selection_toolbar: 'bold italic | blocks | quicklink blockquote'
});

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

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

tinymce.init({
  selector: 'textarea',  // 根据你的 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',  // 根据你的 HTML 更改此值
  plugins: 'quickbars pagebreak',
  quickbars_insert_toolbar: 'quickimage quicktable | hr pagebreak'
});

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

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

tinymce.init({
  selector: 'textarea',  // 根据你的 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',  // 根据你的 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
});

上下文（内容特定）插件工具栏

editimage_toolbar

可以通过 editimage_toolbar 选项控制上下文工具栏上将显示的具体按钮选择。

类型：String

默认值：'rotateleft rotateright | flipv fliph | editimage imageoptions'

可能的值：

• rotateleft

• rotateright

• flipv

• fliph

• editimage

• imageoptions

示例：使用 editimage_toolbar

tinymce.init({
  selector: 'textarea',  // 根据你的 HTML 更改此值
  toolbar: 'image',
  plugins: 'image editimage',
  editimage_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions'
});

link_context_toolbar

默认情况下，无法直接从编辑器中打开链接。将 link_context_toolbar 设置为 true 将启用上下文工具栏，当用户的光标位于链接内时，该工具栏会出现。此上下文工具栏包含用于修改、删除和打开所选链接的字段。外部链接将在单独的标签页中打开，而相对链接会滚动到编辑器内的target（如果找到该target）。

此上下文工具栏与 Link 插件 - link_quicklink 文档中提到的上下文工具栏相同。

类型： Boolean

默认值： false

可能的值： true、false

示例：使用 link_context_toolbar

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

table_toolbar

此选项允许您指定表格的上下文工具栏上显示的工具栏按钮。提供一个以空格分隔的工具栏按钮列表，顺序应为显示顺序。要在工具栏上创建组，使用 | 管道符在工具栏按钮之间添加分隔符。

要禁用表格工具栏，请将值设置为空字符串。

类型： String

默认值： 'tableprops tabledelete | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol'

可能的值： 任何工具栏按钮。有关预定义工具栏按钮的列表，请参阅：TinyMCE 可用的工具栏按钮。

示例：默认的 table_toolbar 配置

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  toolbar: 'table',
  table_toolbar: 'tableprops tabledelete | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol'
});

示例：禁用表格工具栏

要禁用或删除上下文表格工具栏，请将 table_toolbar 设置为空字符串。

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