Add class to element inserted with TinyMCE

问题:

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.

回答1:

You should specify it in your editor's init by the help of extended_valid_elements. The tinymce documentation contains 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:

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

回答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

---

Currently I setup a custom stylesheet for the editor and load it via init option. This styles everything in the editor.

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.

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

回答3:

Unless someone has a better solution, I might just need to bind an event listener to the DOMNodeInserted event 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.

回答4:

I'm not sure I get exactly what you mean but does this help?

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

EDIT: What about trying the following in the init

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.

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