我想知道是否有一种方法可以配置 TinyMCE（所见即所得的 HTML 编辑器）为插入的特定类型的所有元素添加一个类。我想应用 Bootstrap 的样式，特别是表格。我想知道是否有某种钩子或可以在插入元素时向元素添加类名的东西？例如，我想将class="table table-bordered" 添加到通过 UI 插入的所有表格元素中。我知道有一种方法可以指定样式表以应用于内容，但我不知道将类名添加到插入元素的机制。
【问题讨论】：
我不确定我是否完全理解您的意思，但这有帮助吗？
http://www.tinymce.com/tryit/custom_formats.php
编辑：如何在初始化中尝试以下内容
extended_valid_elements: "table[class=table table-bordered]"
编辑编辑：我认为这也是一个可能的选择，应该有助于摆脱默认的 mce 类。
http://www.tinymce.com/wiki.php/Configuration:visual_table_class
【讨论】：
除非有人有更好的解决方案，否则我可能只需要将事件侦听器绑定到 DOMNodeInserted 事件，以检查是否插入了表并将类添加到其中。我宁愿不修改 TinyMCE 的内部结构来支持这一点。
【讨论】：
let iframe_body = $('iframe').contents().find("body"); $(iframe_body).on("DOMNodeInserted", function (event) { $(event.target).addClass('left'); $(event.target).css({ "text-align": "left" }); $(event.target).attr("data-mce-style", "text-align: left"); });
id，但似乎只有第一个“坚持” - 后续元素在我得到它们之前就使用相同的 id 进行初始化，并且在我更改 id 后它被重置回@987654324 @。我正在添加一个事件处理程序，如果我单步执行代码来添加它似乎可以工作，但是当我不单步执行时，即使我的处理程序仍然附加，我似乎也无法获得点击事件！
click 上进行初始化，所以可能是这种情况。
// 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 http://www.tinymce.com/wiki.php/API3:method.tinymce.dom.DOMUtils.addClass
API 4x http://www.tinymce.com/wiki.php/api4:method.tinymce.dom.DOMUtils.addClass
目前我为编辑器设置了一个自定义样式表并通过 init 选项加载它。这会为编辑器中的所有内容设置样式。
tinyMCE.init({
...
content_css : "/mycontent.css"
});
我将编辑器版本存储在我的数据库中，然后在需要查看时使用DOMDocument() 添加前端样式。 以下 PHP 只是一个例子。
<?php
$html = utf8_decode(htmlspecialchars_decode($html));
$doc = new DOMDocument();
$doc->loadHTML($html);
$tables = $doc->getElementsByTagName('table');
foreach ($tables as $tbl) {
$tbl->setAttribute('class', 'table table-striped table-bordered');
}
$save = $doc->saveHTML();
$save = utf8_encode($save);
?>
【讨论】：
您应该在extended_valid_elements 的帮助下在编辑器的初始化中指定它。 tinymce documentation 包含解决方案。您所要做的就是完成此设置。在“类”属性中，您可以像这样提供自定义类名称：
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"]'
],
【讨论】：
&quot; 的内容，所以我的建议是你可以简单地使用'table[class=table table-bordered]'