Table插件为TinyMCE添加了表格管理功能，包括对话框、上下文菜单、上下文工具栏、菜单项和工具栏按钮。

基本设置

tinymce.init({
  selector: 'textarea',  // 根据你的HTML修改此值
  plugins: 'table',
  toolbar: 'table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol'
});

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

选项

有关核心表格功能提供的其他选项，请参阅表格选项。

这些选项会影响table插件的执行。

table_toolbar

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

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

类型：String

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

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

示例：默认table_toolbar配置

tinymce.init({
  selector: 'textarea',  // 根据你的HTML修改此值
  plugins: 'table',
  toolbar: 'table',
  table_toolbar: 'tableprops tabledelete | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol'
});

示例：禁用表格工具栏

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

tinymce.init({
  selector: 'textarea',  // 根据你的HTML修改此值
  plugins: 'table',
  toolbar: 'table',
  table_toolbar: ''
});

table_appearance_options

此选项允许您禁用用户在插入或编辑表格时可用的一些选项。当设置为false时，以下字段将不会出现：单元格间距、单元格边距、边框和标题。

类型：Boolean

默认值：true

可能的值：true，false

示例：使用table_appearance_options

tinymce.init({
  selector: 'textarea',  // 根据你的HTML修改此值
  plugins: 'table',
  toolbar: 'table',
  table_appearance_options: false
});

table_grid

此选项允许您禁用表格菜单中的网格状表格选择器。网格功能（默认启用）由一个可拖拽的矩阵组成，用户可以与之交互，根据其输入自动创建一个x行x列的表格。

但是，如果将table_grid设置为false，表格选择器将被一个菜单项取代，该菜单项会打开一个对话框，用户可以使用该对话框插入表格。此对话框允许用户设置各种参数，如列数和行数、宽度、高度、单元格间距和边距、边框宽度、对齐方式以及是否显示标题。如果将table_advtab设置为true，还可以使用高级样式选项。

要将表格菜单配置为包含表格选择器和表格对话框菜单项，请将table_grid设置为true，并配置menu以包含inserttable和inserttabledialog菜单项。

类型：Boolean

默认值：true

可能的值：true，false

此选项的默认值在移动设备上有所不同。有关移动设备默认选项的信息，请参阅：TinyMCE Mobile — 具有移动默认值的配置选项。

示例：使用table_grid

tinymce.init({
  selector: 'textarea',  // 根据你的HTML修改此值
  plugins: 'table',
  toolbar: 'table',
  table_grid: false
});

table_class_list

此选项使您能够指定要在表格选项对话框中显示的类列表。如果您希望用户为表格元素分配预定义的类，这将很有用。

类型：Array

示例：使用table_class_list

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  plugins: 'table',
  toolbar: 'table',
  table_class_list: [
    { title: 'None', value: '' },
    { title: 'No Borders', value: 'table_no_borders' },
    { title: 'Red borders', value: 'table_red_borders' },
    { title: 'Blue borders', value: 'table_blue_borders' },
    { title: 'Green borders', value: 'table_green_borders' }
  ]
});

表类嵌套列表示例

要创建嵌套列表，请将 value 替换为 menu 以添加列表的顶级，然后提供项数组。

例如：

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  plugins: 'table',
  toolbar: 'table',
  table_class_list: [
    { title: 'None', value: '' },
    { title: 'No Borders', value: 'table_no_borders' },
    { title: 'Borders',
      menu: [
        { title: 'Red borders', value: 'table_red_borders' },
        { title: 'Blue borders', value: 'table_blue_borders' },
        { title: 'Green borders', value: 'table_green_borders' }
      ]
    }
  ]
});

table_cell_class_list

此选项允许您指定要在表格单元格选项对话框中显示的类列表。如果希望用户将预定义的类分配给表格单元格，则此选项非常有用。

类型： Array

示例：使用 table_cell_class_list

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  plugins: 'table',
  toolbar: 'table',
  table_cell_class_list: [
    { title: 'None', value: '' },
    { title: 'No Border', value: 'table_cell_no_border' },
    { title: 'Red border', value: 'table_cell_red_border' },
    { title: 'Blue border', value: 'table_cell_blue_border' },
    { title: 'Green border', value: 'table_cell_green_border' }
  ]
});

表格单元格类嵌套列表示例

要创建嵌套列表，请将 value 替换为 menu 以添加列表的顶级，然后提供项数组。

例如：

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  plugins: 'table',
  toolbar: 'table',
  table_cell_class_list: [
    { title: 'None', value: '' },
    { title: 'No Border', value: 'table_cell_no_border' },
    { title: 'Border',
      menu: [
        { title: 'Red border', value: 'table_cell_red_border' },
        { title: 'Blue border', value: 'table_cell_blue_border' },
        { title: 'Green border', value: 'table_cell_green_border' }
      ]
    }
  ]
});

table_row_class_list

此选项允许您指定要在表格行选项对话框中显示的类列表。如果希望用户将预定义的类分配给表格行，则此选项非常有用。

类型： Array

示例：使用 table_row_class_list

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  plugins: 'table',
  toolbar: 'table',
  table_row_class_list: [
    { title: 'None', value: '' },
    { title: 'No Border', value: 'table_row_no_border' },
    { title: 'Red border', value: 'table_row_red_border' },
    { title: 'Blue border', value: 'table_row_blue_border' },
    { title: 'Green border', value: 'table_row_green_border' }
  ]
});

表格行类嵌套列表示例

要创建嵌套列表，请将 value 替换为 menu 以添加列表的顶级，然后提供项数组。

例如：

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  plugins: 'table',
  toolbar: 'table',
  table_row_class_list: [
    { title: 'None', value: '' },
    { title: 'No Border', value: 'table_row_no_border' },
    { title: 'Border',
      menu: [
        { title: 'Red border', value: 'table_row_red_border' },
        { title: 'Blue border', value: 'table_row_blue_border' },
        { title: 'Green border', value: 'table_row_green_border' }
      ]
    }
  ]
});

table_border_widths

此选项用于指定预定义的单元格边框宽度列表，以便在 tablecellborderwidth 工具栏按钮或菜单项上快速访问。此选项接受任何有效的 CSS 数值。

类型： Array

默认值：

[
  { title: '1px', value: '1px' },
  { title: '2px', value: '2px' },
  { title: '3px', value: '3px' },
  { title: '4px', value: '4px' },
  { title: '5px', value: '5px' }
]

示例：使用 table_border_widths

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  plugins: 'table',
  toolbar: 'table',
  table_border_widths: [
    { title: 'small', value: '1px' },
    { title: 'medium', value: '3px' },
    { title: 'large', value: '5px' },
  ]
});

table_border_styles

此选项用于指定预定义的单元格边框宽度列表，以便在 tablecellborderstyle 工具栏按钮或菜单项上快速访问，以及对话框选项。此选项接受任何有效的 CSS 边框样式。

类型： Array

默认值：

[
  { title: 'Solid', value: 'solid' },
  { title: 'Dotted', value: 'dotted' },
  { title: 'Dashed', value: 'dashed' },
  { title: 'Double', value: 'double' },
  { title: 'Groove', value: 'groove' },
  { title: 'Ridge', value: 'ridge' },
  { title: 'Inset', value: 'inset' },
  { title: 'Outset', value: 'outset' },
  { title: 'None', value: 'none' },
  { title: 'Hidden', value: 'hidden' }
]

示例：使用 table_border_styles

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  plugins: 'table',
  toolbar: 'table',
  table_border_styles: [
    { title: 'Solid', value: 'solid' },
    { title: 'Dotted', value: 'dotted' },
    { title: 'Dashed', value: 'dashed' }
  ]
});

table_background_color_map

此选项用于指定表格单元格背景颜色选择器的默认值，该选择器可通过 tablecellbackgroundcolor 工具栏按钮或菜单项打开。如果未定义值，工具栏按钮和菜单项将使用 color_map 选项的值或默认值。此选项不会修改表格对话框中的背景颜色选择器。此选项接受 Hex、RGB 和 HSL 颜色值。

自定义颜色选择器不适用于 tablecellbackgroundcolor 工具栏按钮或菜单项。

类型： Array

默认值： 请参见 color_map 选项

示例：使用 table_background_color_map

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  plugins: 'table',
  toolbar: 'table',
  table_background_color_map: [
    { title: 'Red', value: 'FF0000' },
    { title: 'White', value: 'FFFFFF' },
    { title: 'Yellow', value: 'F1C40F' }
  ]
});

table_border_color_map

此选项用于指定表格单元格边框颜色选择器的默认值，该选择器可通过 tablecellbordercolor 工具栏按钮或菜单项打开。如果未定义值，工具栏按钮和菜单项将使用 color_map 选项的值或默认值。此选项不会修改表格对话框中的边框颜色选择器。此选项接受 Hex、RGB 和 HSL 颜色值。

自定义颜色选择器不适用于 tablecellbordercolor 工具栏按钮或菜单项。

类型： Array

默认值： 请参见 color_map 选项

示例：使用 table_border_color_map

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  plugins: 'table',
  toolbar: 'table',
  table_border_color_map: [
    { title: 'Red', value: 'FF0000' },
    { title: 'White', value: 'FFFFFF' },
    { title: 'Yellow', value: 'F1C40F' }
  ]
});

table_advtab

此选项可禁用表格对话框中的“高级”选项卡。“高级”选项卡允许用户输入 style、border color 和 background color 值。

类型： Boolean

默认值： true

可能的值： true、false

示例：使用 table_advtab

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  plugins: 'table',
  toolbar: 'table',
  table_advtab: false
});

table_cell_advtab

此选项可禁用表格单元格对话框中的“高级”选项卡。“高级”选项卡允许用户输入 style、border color 和 background color 值。

类型： Boolean

默认值： true

可能的值： true、false

示例：使用 table_cell_advtab

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  plugins: 'table',
  toolbar: 'table',
  table_cell_advtab: false
});

table_row_advtab

此选项可禁用表格行对话框中的“高级”选项卡。“高级”选项卡允许用户输入 style、border color 和 background color 值。

类型： Boolean

默认值： true

可能的值： true、false

示例：使用 table_row_advtab

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  plugins: 'table',
  toolbar: 'table',
  table_row_advtab: false
});

table_style_by_css

此选项允许您强制“表格属性”对话框使用 HTML5/CSS3 标准来设置单元格间距和单元格内边距。默认情况下，单元格间距会作为 border-spacing 样式应用于 table 元素，单元格内边距则会作为 padding 样式应用于所有 td 元素。如果将此选项设置为 false，这些设置将作为属性添加到 table 元素上。

类型：Boolean

默认值：true

可能值：true、false

示例：使用 table_style_by_css

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  toolbar: 'table',
  table_style_by_css: false
});
表格、行和单元格属性对话框中的“高级”选项卡使用 colorpicker，以便应用边框颜色和背景颜色。请参阅文档以使用和配置自定义 colorpicker。

table_merge_content_on_paste

此选项用于设置当把一个表格粘贴到另一个表格中时编辑器的行为。

（如果插入点位于表格内，或者当前选区包含表格的任何部分，粘贴事件将发生在表格内。）

当设置为 true 时，将一个表格粘贴到另一个表格中会用所粘贴的表格替换现有表格。它会将所粘贴的表格合并到现有表格中，并在此过程中替换现有表格。

当设置为 false 时，将一个表格粘贴到另一个表格中会在现有表格的所选单元格内创建一个新的表格。

当此选项设置为 false 时，具体行为取决于当前选区的性质。

  1. 如果没有任何选区（即插入点位于单元格内），粘贴表格会：

    • 在插入点粘贴表格；

    • 将插入点之前单元格中的内容放置在粘贴表格的上方；以及

    • 将插入点之后单元格中的内容放置在粘贴表格的下方。

  2. 如果选区是单元格的全部内容，粘贴表格会：

    • 替换这些内容；并且

    • 将粘贴的表格放入现在已空的单元格中。

  3. 如果选区是多个单元格的全部内容，粘贴表格会：

    • 替换这些内容；

    • 将粘贴的表格放入第一个所选单元格中；并且

    • 从现有表格中移除其他所选单元格。

  4. 如果选区是多个单元格的全部内容以及最后一个单元格的部分内容，粘贴表格会：

    • 替换完全选中的单元格的内容；

    • 将粘贴的表格放入第一个所选单元格中；

    • 移除其他完全选中的单元格；并且

    • 保留部分选中的单元格不变。

此选项默认设置为 true。

类型：Boolean

默认值：true

可能值：true、false

示例：使用 table_merge_content_on_paste

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

工具栏按钮

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

工具栏按钮标识符描述

table

创建/编辑表格元素。

tablecellprops

打开“单元格属性”对话框。

tablecopyrow

将当前行复制到剪贴板。

tablecutrow

将当前行剪切到剪贴板。

tabledelete

删除表格。

tabledeletecol

删除所选列。

tabledeleterow

删除当前行。

tableinsertdialog

打开用于创建新表格的“表格属性”对话框。

tableinsertcolafter

在当前列之后插入列。

tableinsertcolbefore

在当前列之前插入列。

tableinsertrowafter

在当前行之后插入新行。

tableinsertrowbefore

在当前行之前插入新行。

tablemergecells

合并所选单元格。

tablepasterowafter

将剪贴板中的行粘贴到当前行之后。

tablepasterowbefore

将剪贴板中的行粘贴到当前行之前。

tableprops

打开“表格属性”对话框。

tablerowprops

打开“行属性”对话框。

tablesplitcells

拆分当前合并的单元格。

tableclass

为所选表格添加或移除预定义的类。

tablecellclass

为表格中选中的单元格添加或移除预定义类。

tablecellvalign

设置所选单元格的垂直对齐方式。

tablecellborderwidth

设置所有选中单元格的边框宽度。

tablecellborderstyle

设置所有选中单元格的边框样式。

tablecaption

切换选中表格的标题显示。

tablecellbackgroundcolor

设置选中单元格的背景颜色。

tablecellbordercolor

设置选中单元格的边框颜色。

tablerowheader

在表格表头行和表格主体行之间切换行属性。

tablecolheader

在表格表头列和表格主体列之间切换列属性。

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

菜单项

Table 插件提供以下菜单项：

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

inserttable

表格

插入表格网格菜单。

inserttabledialog

不适用

打开用于创建新表格的表格属性对话框。

tableprops

表格

打开表格属性对话框。

deletetable

表格

删除当前表格。

cell

表格

带有相关控件的单元格菜单项。

tablemergecells

表格

合并所有当前选中的单元格。

tablesplitcells

表格

拆分合并的单元格。

tablecellprops

表格

打开单元格属性对话框。

column

表格

带有相关控件的列菜单项。

tableinsertcolumnbefore

表格

在当前选中列之前插入列。

tableinsertcolumnafter

表格

在当前选中列之后插入列。

tablecutcolumn

表格

剪切当前选中的列。

tablecopycolumn

表格

复制当前选中的列。

tablepastecolumnbefore

表格

在当前选中列之前粘贴列。

tablepastecolumnafter

表格

在当前选中列之后粘贴列。

tabledeletecolumn

表格

删除当前选中的列。

row

表格

带有相关控件的行菜单项。

tableinsertrowbefore

表格

在当前选中行之前插入行。

tableinsertrowafter

表格

在当前选中行之后插入行。

tablecutrow

表格

剪切当前选中的行。

tablecopyrow

表格

复制当前选中的行。

tablepasterowbefore

表格

在当前选中行之前粘贴行。

tablepasterowafter

表格

在当前选中行之后粘贴行。

tablerowprops

表格

打开行属性对话框。

tabledeleterow

表格

删除当前选中的行。

tableclass

不适用

为选中的表格添加或移除预定义类。

tablecellclass

不适用

为表格中选中的单元格添加或移除预定义类。

tablecellvalign

不适用

设置所选单元格的垂直对齐方式。

tablecellborderwidth

不适用

设置所选单元格的边框宽度。

tablecellborderstyle

不适用

设置所有选中单元格的边框样式。

tablecaption

不适用

切换所选表格的标题显示。

tablecellbackgroundcolor

不适用

设置所选单元格的背景颜色。

tablecellbordercolor

不适用

设置所选单元格的边框颜色。

tablerowheader

不适用

切换行是否为表头行或表体行。

tablecolheader

不适用

切换列是否为表头列或表体列。

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

命令

如需了解核心表格功能提供的其他命令，请参阅 核心表格命令。

Table 插件提供了以下 TinyMCE 命令。

命令描述

mceInsertTableDialog

打开插入/编辑表格对话框。

mceTableProps

打开表格属性对话框。

mceTableRowProps

打开表格行属性对话框。

mceTableCellProps

打开表格单元格属性对话框。

示例
tinymce.activeEditor.execCommand('mceInsertTableDialog');
tinymce.activeEditor.execCommand('mceTableProps');
tinymce.activeEditor.execCommand('mceTableRowProps');
tinymce.activeEditor.execCommand('mceTableCellProps');