TinyMCE Table 和 Enhanced Tables 插件

TinyMCE 具有内置的表格功能。然而,有两个插件为表格提供了额外的功能:

  • Table 是一个开源插件,通过 UI 组件提供改进的表格处理功能,包括对话框、上下文菜单、上下文工具栏、菜单项和工具栏按钮。有关信息,请参阅 Table 插件。

  • Enhanced Tables 是一个高级插件,通过添加高级功能(包括行和列的排序选项,以及表格的行号列功能)来扩展 Table 插件。有关信息,请参阅 Enhanced Tables 插件。

以下选项适用于核心表格功能,也可能影响 table 插件和 advtable 插件的功能。

控制表格的插入方式

现有的表格以及使用 setContent、insertContent 或粘贴添加的表格不受这些选项的影响。

table_use_colgroups

此选项为新表格添加 colgroup 和 col 元素,用于指定列宽。

TinyMCE 仅支持 col 元素上的 width 属性。不支持其他属性,例如 span 属性。

类型:Boolean

默认值:true

可能的值:true、false

示例:使用 table_use_colgroups 禁用 colgroup 支持

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

table_default_attributes

此选项允许您指定插入表格的默认属性。

类型:Object

默认值:{ border: '1' }

示例:使用 table_default_attributes

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

table_default_styles

此选项允许您指定插入表格的默认样式。

类型:Object

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

示例:使用 table_default_styles

tinymce.init({
  selector: 'textarea',  // 根据您的 HTML 更改此值
  table_default_styles: {
    width: '50%'
  }
});

table_default_header_rows

table_default_header_rows 选项设置通过编辑器 UI(例如,通过表格选择器或插入表格对话框)创建的新表格的默认表头行数。这有助于集成者通过确保新表格默认具有表头行来满足可访问性标准,无需手动干预。

类型:Number

默认值:0

示例:使用 table_default_header_rows

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

table_default_header_cols

table_default_header_cols 选项设置通过编辑器 UI(例如,通过表格选择器或插入表格对话框)创建的新表格的默认表头列数。这有助于集成者通过确保新表格默认具有表头列来满足可访问性标准,无需手动干预。

类型:Number

默认值:0

示例:使用 table_default_header_cols

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

与表格交互

table_clone_elements

此选项允许您指定在向表格插入行/列时,哪些元素应作为空子元素克隆。默认情况下,它将 strong、em、b、i、span、font、h1、h2、h3、h4、h5、h6、p 和 div 元素克隆到新单元格中。

类型:String

示例:使用 table_clone_elements

tinymce.init({
  selector: 'textarea',  // 根据您的 HTML 更改此值
  table_clone_elements: 'strong em a'
});

table_tab_navigation

此选项允许您禁用表格单元格之间的默认 tab 导航功能。默认情况下,当用户按下 tab 键时,光标将在表格内的单元格之间移动。通过将 table_tab_navigation 值设置为 false,光标将在浏览器元素(例如 URL 栏或表单字段等)之间切换。

类型:Boolean

默认值:true

可能的值:true、false

示例:使用 table_tab_navigation

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

table_header_type

table_header_type 选项影响当表格行被设置为标题行时表格的结构。请注意,此设置不影响标题列。

table_header_type 选项有四种不同的设置:'section'、'cells'、'sectionCells' 和 'auto'。

  • section - 当表格行被设置为标题行时,该行 (tr) 被移动到 thead 元素中。单元格类型(td 和/或 th)不受影响。

    例如:

    <table>
      <thead>
        <tr>
          <td>&nbsp;</td>
          <th>&nbsp;</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </tbody>
    </table>
  • cells - 当表格行被设置为标题行时,该行 (tr) 移动到 tbody 元素中(如果在 thead 元素中)。该行中的所有表格数据单元格元素 (td) 都更改为表格标题单元格元素 (th)。

    例如:

    <table>
      <tbody>
        <tr>
          <th>&nbsp;</th>
          <th>&nbsp;</th>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </tbody>
    </table>
  • sectionCells - 当表格行被设置为标题行时,该行 (tr) 被移动到 thead 元素中。该行中的所有单元格都更改为表格标题单元格元素 (th)。

    例如:

    <table>
      <thead>
        <tr>
          <th>&nbsp;</th>
          <th>&nbsp;</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </tbody>
    </table>
  • auto - 找到表格中第一个现有的标题行,并使用相同的结构。如果不存在其他表格标题行,则将应用 section 标题类型。

类型: String

默认值: 'section'

可能的值: 'section'、'cells'、'sectionCells'、'auto'

示例:使用 table_header_type

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

控制表格大小调整

table_sizing_mode

table_sizing_mode 选项强制使用新表格和修改后的表格(包括对表格的大小调整操作)的表格大小调整方法。此选项仅影响表格和单元格的宽度,不适用于表格和单元格的高度。

此选项接受以下值:

  • fixed - 使用基于像素的宽度。

  • relative - 使用基于百分比的宽度。

  • responsive - 不使用指定的宽度。注意:如果调整 responsive 表格的大小,它将转换为 relative 表格(没有宽度的表格无法调整大小)。

  • auto - 根据宽度样式或属性检测表格大小调整,并尝试保持当前的大小调整模式。

类型: String

默认值: 'auto'

可能的值: 'fixed'、'relative'、'responsive'、'auto'

示例:使用 table_sizing_mode

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

table_column_resizing

table_column_resizing 选项设置当用户调整、插入或删除表格列时,是调整表格还是其他列的大小。

有两个设置:

  • preservetable:通过更改附近列的大小,在操作表格列时保持表格宽度不变。

  • resizetable:在操作表格列时更改表格宽度,并保持其他列的大小不变。

类型: String

默认值: 'preservetable'

可能的值: 'preservetable'、'resizetable'

示例:使用 table_column_resizing

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

table_resize_bars

此选项可以禁用通过拖动两列或两行之间的边框来调整表格列和行大小的功能。

类型: Boolean

默认值: true

可能的值: true、false

示例:使用 table_resize_bars

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

object_resizing

此选项允许您启用/禁用图像、表格或媒体对象上的调整大小手柄。此选项默认启用,允许您调整表格和图像的大小。您还可以指定要启用调整大小的CSS3选择器。

禁用所有图像/表格的调整大小功能

类型: Boolean, String

默认值: true

可能的值: true, false, 或有效的CSS选择器

此选项的默认值在移动设备上有所不同。有关移动设备默认选项的信息,请参阅: TinyMCE Mobile — 具有移动默认值的配置选项。
示例:禁用对象调整大小功能
tinymce.init({
  selector: 'textarea',  // 根据你的HTML更改此值
  object_resizing: false
});

仅启用图像的调整大小功能

类型: Boolean, String

默认值: true

可能的值: true, false, img

示例:为图像启用对象调整大小功能
tinymce.init({
  selector: 'textarea',  // 根据你的HTML更改此值
  object_resizing: 'img'
});

各种表格设置的示例

以下是常见设置的一些配置示例。

表格上无默认属性或样式

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

基于像素的调整大小

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

基于百分比的调整大小

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