Add class to element inserted with TinyMCE

tinymce, twitter-bootstrap

Solution

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

Problem

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.

Original source