插件 \ table 表格插件提供插入及编辑表格的能力
+toolbar按钮+menu项

此页更新时间：2021-05-11 22:39

此页英文文档：https://www.tiny.cloud/docs/plugins/table/

提供了相当强大的表格编辑功能，堪比word（虽然有点夸张），TinyMCE的灵活性在这里再次得到体现。

该插件提供了一堆工具栏按钮，但一般用这些按钮的合集“table”就够了，除非你的内容区准备专门从事表格编辑。除了一堆工具栏按钮，该插件还提供了表格的专属快速工具栏及右键菜单。

下面DEMO列出了table插件提供的所有工具栏按钮。

tinymce.init({
    selector: '#tinydemo',
    plugins: "table",
    toolbar: "table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol"
});

额外设置

table_toolbar

指定table专属的快速工具栏中按钮的显示及顺序。该参数是一个以空格分隔的工具栏控件列表。使用“|”作为分隔符。如果要禁用此工具栏，只需将值设置为空字符串即可。

取值：string

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

还可以加入的值： table / tablerowprops / tablecellprops

table_toolbar: "table tabledelete | tableinsertcolbefore tableinsertcolafter tabledeletecol"

table_appearance_options

设置为false时，将不会显示以下字段：单元格内边距、单元格填充、边框和标题（Cell spacing, Cell padding, Border and Caption）。

取值： true / false

默认： true

table_clone_elements

指定在向表中插入行/列时，将哪些元素克隆为空的子元素。

This option enables you to specify which elements should be cloned as empty children when inserting rows/columns to a table.

取值： String

默认： "strong em b i span font h1 h2 h3 h4 h5 h6 p div"

这个参数的意思是，比如上一行里有p元素包裹的内容时，插入一行后，新行默认有个<p>&nbsp;</p>标签（感谢网友 ytmlt 提供说明。）

table_grid

设为false时，创建表格将使用表格属性对话框指定行列数，设为true时使用鼠标在二维网格上拖动创建表格。下方是个例子：

取值： true / false

默认： true

table_grid: false

table_tab_navigation

当光标在单元格内时，按tab键可将光标移动到下一单元格。

取值： true / false

默认： true

还记得上一篇的tabfocus插件吗，当table和tabfocus两个插件同时使用时，光标在单元格内table_tab_navigation起作用，其它地方tabfocus起作用。

table_default_attributes

为创建的表格指定默认属性。

取值： Object

默认： { border: '1' }

table_default_styles

表格默认样式。上面那个参数是属性，这个才是样式（css），别弄混了。

取值： Object

默认： { 'border-collapse':'collapse', 'width':'100%' }

table_responsive_width

设置表格大小的单位是px还是%。设为true时将强制使用百分比调整大小，设为false将用实际像素调整大小。默认none为根据表格属性使用的单位自动调整大小。

table_class_list

在表格属性对话框中显示一个class属性选择列表，让用户选择预置的表格（table）样式，此参数可用在办公场景中，为不懂设计的人员提供不同外观的表格，超赞！

取值： Array

tinymce.init({
    selector: '#tinydemo',
    plugins: "table",
    toolbar: "table",
    table_class_list: [
        {title: '无', value: ''},
        {title: '商务蓝', value: 'table-blue'},
        {title: '中国红', value: 'table-red'}
    ],
});

table_cell_class_list

说明及用法同上，但这个是指定单元格（td）的class属性。

table_row_class_list

说明及用法同上，但这个是指定行（tr）的class属性。

table_advtab

用于显示隐藏表格属性对话框左侧的高级选项。

取值： true / false

默认： true

table_cell_advtab

说明及用法同上，但这个是单元格（td）的。

table_row_advtab

说明及用法同上，但这个是行（tr）的。

table_resize_bars

禁用此项，则将无法拖动表格内部的横线竖线来调整行列大小。

取值： true / false

默认： true

table_style_by_css

开启后强制表格属性对话框中生成的属性使用css来实现而不是插入属性值。

举个例子，边框线是插入属性border=3来实现，但开启该选项后，将使用style="border-width: 3px;"来实现。

译者注：但实测中发现，在指定边框宽度值后，虽然加入了style，但border=1依然存在，也许是table_default_attributes在起作用，默认属性没有删掉。

取值： true / false

默认： false

Commands 命令

tinymce.execCommand('mceInsertTable');
名称说明
mceInsertTable 打开新建表格对话框。提交后，将在当前位置插入一个新表格。
mceTableProps 打开表格属性对话框。如有选中表格，则修改其属性，否则会创建一个新表格。
mceTableRowProps 打开行属性对话框。
mceTableCellProps 打开单元格属性对话框。
mceTableSplitCells 拆分当前单元格。
mceTableMergeCells 合并当前选中的单元格。
mceTableInsertRowBefore 在当前行之前插入一行。
mceTableInsertRowAfter 在当前行之后插入一行。
mceTableInsertColBefore 在当前列之前插入一列。
mceTableInsertColAfter 在当前列之后插入一列。
mceTableDeleteCol 删除当前选中列。
mceTableDeleteRow 删除当前选中行。
mceTableCutRow 剪切当前选中行到剪切板。
mceTableCopyRow 复制当前选中行到剪切板。
mceTablePasteRowBefore 粘贴剪切板中的行到当前行上方。
mceTablePasteRowAfter 粘贴剪切板中的行到当前行下方。
mceTableDelete 删除当前选中的表格。

API 接口

tinymce.activeEditor.plugins.table.insertTable(2, 3);
名称 参数 说明
insertTable 列数: number
行数: number		 在当前位置插入表格，参数1是列数，参数2是行数。
getClipboardRows   返回使用命令mceTableCutRow或mceTableCopyRow在剪切板生成的数据。
setClipboardRows 行的HTML集合: HTMLElement[] 设置剪切板数据，以供命令mceTablePasteRowBefore或mceTablePasteRowAfter粘贴使用。

Events 事件

名称 说明
newrow 创建行时触发。
newcell 创建单元格时触发。
ObectResizeStart 调整 整个表/行/列/单元格 的大小时触发。
ObjectResized 调整完 整个表/行/列/单元格 的大小后触发。

下一节：template 内容模板

▲