Twitter bootstrap 将类添加到使用TinyMCE插入的元素

我想知道是否有办法配置TinyMCE（WYSIWYG HTML编辑器），将类添加到插入的特定类型的所有元素中。我想应用Bootstrap的样式，特别是表格。我想知道是否有某种钩子或其他东西可以在插入元素时将类名添加到元素中？例如，我想将

class=“table table bordered”

添加到通过UI插入的所有表格元素中。我知道有一种方法可以指定要应用于内容的样式表，但我不知道向插入的元素添加类名的机制。

我不确定我是否完全理解您的意思，但这有帮助吗

编辑：在init中尝试以下操作怎么样

扩展的\u有效\u元素：“表[类=带边框的表]”

编辑：我认为这也是一个可能的选择，应该有助于摆脱默认的mce类

---

除非有人有更好的解决方案，否则我可能只需要将一个事件侦听器绑定到

domandeinserted

事件，该事件检查是否插入了表并将类添加到表中。我不想修改TinyMCE的内部结构来支持这一点

// Adds a class to all paragraphs in the active editor
tinyMCE.activeEditor.dom.addClass(tinyMCE.activeEditor.dom.select('p'), 'myclass');

// Adds a class to a specific element in the current page
tinyMCE.DOM.addClass('mydiv', 'myclass');

API 3x

API 4x

---

目前，我为编辑器设置了一个自定义样式表，并通过init选项加载它。这将在编辑器中设置所有样式

tinyMCE.init({
        ...
        content_css : "/mycontent.css"
});

我将编辑器版本存储在数据库中，然后在需要查看时添加前端样式。下面的Php只是一个示例

---

您应该在编辑器的init中通过

扩展的有效元素来指定它。包含解决方案。您所要做的就是完成此设置。在“类”属性中，您可以这样指定自定义类名：

extended_valid_elements: 'img[class="your-custom-class-name"|src|border=0|alt|title|hspace|vspace|align|onmouseover|onmouseout|name]'

或者在您的情况下：

extended_valid_elements: 'table[class="table table-bordered"]'

对于多个元素：

extended_valid_elements: [
    'img[class="your-custom-class-name"|src|border=0|alt|title|hspace|vspace|align|onmouseover|onmouseout|name]',
    'table[class="table table-bordered"]'
],

这将允许我添加一个自定义样式，用户可以将其应用于内容，但默认情况下不会应用它。谢谢你！我在这里遇到了设置默认文本对齐的其他问题，这对我很有帮助。看起来5年后没有更好的解决方案了。但在我的例子中，仅仅添加类是不够的——tinyMCE不会将其保存到DB中。您需要添加如下行：
让iframe_body=$（'iframe'）.contents（）.find（“body”）$（iframe_body）.on（“DOMNodeInserted”，函数（event）{$（event.target）.addClass（'left'）；$（event.target）.css（{“文本对齐”：“left”}）；$（event.target）.attr（“数据mce样式”，“文本对齐：left”）；}）@VolmargReiso我看到使用DOMNodeInserted的结果非常不一致。我需要设置某些元素的
id
，但似乎只有第一个元素“粘住”-后续元素在我获得它们之前用相同的id初始化，在我更改id后，它会重置回
”
。我正在添加一个事件处理程序，如果我单步执行代码来添加它，它似乎可以工作，但是如果我不单步执行，即使我的处理程序仍然连接在一起，我似乎也无法获得单击事件@迈克尔在我的情况下，我有一个有一串按钮的面板。每个按钮都有单独的id。在这里单击我调用模式，然后分别为每个模式初始化tinymce。我正在初始化
单击
，所以可能就是这样。
extended_valid_elements: [
    'img[class="your-custom-class-name"|src|border=0|alt|title|hspace|vspace|align|onmouseover|onmouseout|name]',
    'table[class="table table-bordered"]'
],