如何在tinymce中使用javascript在表上添加类？答案

【问题标题】：how to add class on table using javascript in tinymce?如何在tinymce中使用javascript在表上添加类？
【发布时间】：2016-09-19 08:21:21
【问题描述】：

我在桌子上添加课程时遇到了一些问题。我想要这个代码

&lt;table&gt;&lt;/table&gt;

点击tinymce中的一个按钮变成这个代码。

&lt;table class="try-class"&gt;&lt;/table&gt;

我有添加按钮，但仍然无法解决如何在 tinymce 表插件上添加代码。谢谢... :)

【问题讨论】：

我建议阅读此w3schools.com/jquery/html_addclass.asp（与您的问题相关），然后将代码添加到 HTML 文件中的脚本标记内。

标签： javascript jquery plugins tinymce

【解决方案1】：

查看 TinyMCE 配置文件的 style_formats 选项：

https://www.tinymce.com/docs/configure/content-formatting/#style_formats

您可以将某个标签定位为与您希望添加的样式相关。例如：

style_formats: [
    {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
    {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
    {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}    
]

...允许您在编辑器中将tablerow1 类添加到<tr> 标记中。

【讨论】：

【解决方案2】：

我曾希望style_formats 会起作用，但它对我没有任何作用。这终于是我用来向我的表中添加自定义类的方法了：

table_default_styles: {},
table_default_attributes: { class: 'table table-bordered table-striped' },

这首先会删除 tinymce 添加的所有自动样式（如宽度）。然后它用我指定我想要的类的类属性覆盖tinymce的默认属性。

就我而言，我使用的是 Bootstrap，所以我希望表具有 Bootstrap 类。

【讨论】：