twitter-bootstrap 向使用 TinyMCE 插入的元素添加类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21792540/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add class to element inserted with TinyMCE
提问by Kyle
I'm wondering if there is a way to configure TinyMCE (the WYSIWYG HTML editor) to add a class to all elements inserted of a certain type. I'd like Bootstrap's styles to apply, specifically with tables. I'm wondering it there is some sort of hook or something that can add a classname to an element as it is inserted? For example, I'd like to add class="table table-bordered"to all table elements that are inserted through the UI. I know there is a way to specify a stylesheet to apply to the content, but I'm not aware of a mechanism to add classnames to the inserted elements.
我想知道是否有一种方法可以配置 TinyMCE（WYSIWYG HTML 编辑器）以将一个类添加到插入的特定类型的所有元素中。我希望应用 Bootstrap 的样式，特别是表格。我想知道是否有某种钩子或其他东西可以在插入元素时向元素添加类名？例如，我想添加class="table table-bordered"到通过 UI 插入的所有表格元素。我知道有一种方法可以指定要应用于内容的样式表，但我不知道将类名添加到插入元素的机制。
回答by Imre
You should specify it in your editor's init by the help of extended_valid_elements. The tinymce documentationcontains the solution. All you have to do is to complete this setting. At the 'class' attribute you can give your custom class name like this:
您应该在编辑器的 init 中借助extended_valid_elements. 该TinyMCE的文件包含解决方案。您所要做的就是完成此设置。在 'class' 属性中，您可以像这样提供自定义类名称：
extended_valid_elements: 'img[class="your-custom-class-name"|src|border=0|alt|title|hspace|vspace|align|onmouseover|onmouseout|name]'
or in your case:
或者在你的情况下：
extended_valid_elements: 'table[class="table table-bordered"]'
for multiple elements:
对于多个元素：
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"]'
],
回答by Brian
// 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 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
API 4x http://www.tinymce.com/wiki.php/api4:method.tinymce.dom.DOMUtils.addClass
Currently I setup a custom stylesheet for the editor and load it via init option. This styles everything in the editor.
目前我为编辑器设置了一个自定义样式表并通过 init 选项加载它。这对编辑器中的所有内容进行样式设置。
tinyMCE.init({
...
content_css : "/mycontent.css"
});
I store the editor version in my db, then I use DOMDocument()to add the front end styling when it needs to be viewed. Following Php is an example only.
我将编辑器版本存储在我的数据库中，然后在需要查看时使用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);
?>
回答by Kyle
Unless someone has a better solution, I might just need to bind an event listener to the DOMNodeInsertedevent that checks to see if a table was inserted and adds the class to it. I'd rather not modify TinyMCE's internals to support this.
除非有人有更好的解决方案，否则我可能只需要将事件侦听器绑定到DOMNodeInserted检查是否插入了表并将类添加到其中的事件。我宁愿不修改 TinyMCE 的内部结构来支持这一点。
回答by lalaland
I'm not sure I get exactly what you mean but does this help?
我不确定我是否完全理解您的意思，但这有帮助吗？
http://www.tinymce.com/tryit/custom_formats.php
http://www.tinymce.com/tryit/custom_formats.php
EDIT: What about trying the following in the init
编辑：在 init 中尝试以下内容怎么样
extended_valid_elements: "table[class=table table-bordered]"
extended_valid_elements: "table[class=table table-bordered]"
EDIT EDIT: I think this is also a possible option, should help get rid of the default mce class.
编辑 编辑：我认为这也是一个可能的选择，应该有助于摆脱默认的 mce 类。
http://www.tinymce.com/wiki.php/Configuration:visual_table_class
http://www.tinymce.com/wiki.php/Configuration:visual_table_class
