Question

So I have a TinyMCE form on my page and it is pre-filled with “sections” (divs with specific class names).

I have a couple of plugins that will add to TinyMCE with more “sections”.

I need it so when I push the plugin button it will test to make sure the cursor is not inside a “section” and paste a “section” inside another “section”.

Not sure the direction I need to take to accomplish this. Any help would be great.

more info:
So below is an example of a plugin that adds a button that just inserts a simple dov into the editor at the selection/cursor.

ed.addButton('pluginbutton', {
    title : 'MyPlugin',
    image : 'img/test.png',
    onclick : function() {
        ed.selection.setContent('<div>test</div>');
    }
});

I am currently thinking that onBeforeSetContent is the API event handler I need to set to process whether or not I am in another section and if so send a message to the screen. If not just do the setContent method. I am not sure exactly how to set that up though so I am still figuring that out. Any help here?

Answer 1

Since it seems like you have control over the plugin, here is how I would edit it to work.

Note: I am using the jQuery method closest. I figured since you are on the jQuery core team, you are probably using it for this project. If not, just refactor that line as needed. The important part is that selection.getNode() returns the DOM element that is the parent of both the start and end selection points.:

ed.addButton('pluginbutton', {
    title : 'MyPlugin',
    image : 'img/test.png',
    onclick : function() {
        if( !$(ed.selection.getNode()).closest('div.section').length ){
            ed.selection.setContent('<div class="section">test</div>'); 
        }
    }
});

Additional thoughts

Also, to make your plugin aware enough so it won’t put a div as the child of a p tag, you could do something like this:

Replace onclick above with this:

onclick: function(){
    var $node = $(ed.selection.getNode());
    if( !$node.closest('div.section').length ){
       // Get highest element that is a direct child of the `body` tag:
       var $parent = $node.closest('body > *');
       // Wrap with our special section div
       if($parent.length) $parent.wrap('<div class="section"></div>');
    }
}