TinyMCE - exclude elements

Question

I'm wondering if it's possible to exclude some elements from TinyMCE's editable DIV. Here's an example code:

<div class="editable-area">
    <h2>heading</h2>
    <p>paragraph</p>
    <div class="exclude-this-element"></div>
</div>

.exclude-this-element:empty:before { content: "Editable Area"; }

tinymce.init({
    inline: true,
    fixed_toolbar_container: '.toolbar'
});
tinyMCE.execCommand('mceAddEditor', false, '.editable-area');

The problem is that, when TinyMCE is initialized on .editable-area, it adds <br> tag to .exclude-this-element and Editable Area text stops appearing. Actually, I think that entire .exclude-this-element is erased after a while. Can this element be excluded completely from being altered by TinyMCE?

I would also like to attach some actions (like click or jQuery UI functions) to .exclude-this-element and make it not interfere with TinyMCE.

I tried valid_children, valid_elements and invalid_elements but I think that none of these can be used to exclude any elements from being editable (it only excludes them when saving the content of the editor): http://www.tinymce.com/wiki.php/Configuration

cyrat cyrat · Accepted Answer · 2013-10-09T12:02:10

You can use content editable method

http://www.tinymce.com/wiki.php/api4:property.tinymce.Env.contentEditable and also

noneditable plugin. This plugin makes elements with noneditable class to be - non editable

http://www.tinymce.com/wiki.php/Plugin:noneditable

EDIT:

Try to block the BR elements by adding this in tinyMCE INIT configuration:

 force_br_newlines : false,
 forced_root_block : "", 
 convert_newlines_to_brs: false,

If the BR tags appear inside content when you paste it from somewhere you also can add this:

paste_preprocess: function(pl, o) {
o.content = o.content.replace(/<br><\/br>/gi, " ");
 }

TinyMCE - exclude elements

1 Answers