Question

我想知道是否有办法配置TinyMCE（WYSIWYG HTML编辑器）为所有插入某种类型的元素添加一个类。我想要应用Bootstrap的样式，特别是表格。我想知道它有某种钩子或什么东西可以在插入时为元素添加一个类名？例如，我想将class="table table-bordered"添加到通过UI插入的所有表元素中。我知道有一种方法可以指定一个样式表来应用于内容，但我不知道为插入的元素添加类名的机制。

Answer 1

您应该在extended_valid_elements的帮助下在编辑器初始化中指定它。 tinymce documentation包含解决方案。您所要做的就是完成此设置。在班级＆＃39;属性，您可以像这样给出自定义类名：

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"]'
],

Answer 2

// 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);
?>

Answer 3

除非有人有更好的解决方案，否则我可能只需要将事件监听器绑定到DOMNodeInserted事件，该事件检查是否插入了表并将类添加到其中。我宁愿不修改TinyMCE的内部以支持这一点。

Answer 4

我不确定我到底是什么意思，但这有帮助吗？

http://www.tinymce.com/tryit/custom_formats.php

编辑：如何在init

中尝试以下操作

extended_valid_elements：“table [class = table table-bordered]”

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

http://www.tinymce.com/wiki.php/Configuration:visual_table_class

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

4 个答案: