I wrote a tinymce button to place a special div on my editor (I didn't use the format dropdown because the client was unsure of it). When the user presses enter inside the div it creates another instance of that div. I want it create a paragraph inside that div.

I'm using a similar plugin now that creates divs for columns that doesn't have this issue. I've reviewed their code but don't see any obvious difference.

my js:

tinymce.create('tinymce.plugins.containerBlock', {
    init : function(ed, url) {
        ed.addButton('containerBlock', {
            title : 'Add Container Block',
            image : url+'/containerBlock.png',
            onclick : function() {
                 ed.selection.setContent('<div class="container">Add Full Width Content or Content Block</div>&nbsp;');

    createControl : function(n, cm) {
        return null;
tinymce.PluginManager.add('containerBlock', tinymce.plugins.containerBlock);

my php:

function structure_buttons(){

    if ( current_user_can('edit_posts') &&  current_user_can('edit_pages') )
        //Called when tiny MCE loads plugins - 'add_custom' is defined below.
        add_filter('mce_external_plugins', 'add_custom_structure');
        //Called when buttons are loading. -'register_button' is defined below.
        add_filter('mce_buttons', 'register_structure_buttons');


function register_structure_buttons($buttons) {
   array_push($buttons, 'containerBlock');
   array_push($buttons, 'contentBlock');
   return $buttons;

function add_custom_structure($plugin_array) {
   $plugin_array['containerBlock'] = get_bloginfo('template_url').'/js/custombutton.js';
   $plugin_array['contentBlock'] = get_bloginfo('template_url').'/js/custombutton.js';
   return $plugin_array;

1 Answer 1


Turns out you have to have a <p> tag in the div to prevent that.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.