How do I get TinyMCE to allow text-align when H1 is the root element?

Question

I have an h1 or h2 etc. tag as the root element which I apply a TinyMCE inline editor to.

I want to allow the user to align this text to the right or to center it.

However, TinyMCE only allows h1 s to have the text-align attribute when it is contained within a div .

Alternatively, is there a way to have a div , which is only allowed to have a single h1 element, and no other elements?

I have tried the following option in tinymce.init after making the root element a div instead of an h1 .

valid_elements: 'h1'

which didn't work, and then I tried

valid_elements: 'h1/p'

which does convert all p s to h1 s, but only after the editor is closed and reopened, not while the user is typing.

Answer 1

The problem here is that when you apply the text-align property it's wrapping the text in a span tag (or other tag.. ie strong, etc). This works for most formatting but doesn't work for text-align. The reason why is because the tex-align has to be applied to the parent tag, not interior of it. It's like if I told you to center a square within another square that's the exact same size. It's the same if you left-align, right-align or center-align because there's no space to move around in. You can see what I mean on this fiddle: http://jsfiddle.net/f8meyapv/1/

I have two solutions for you.

First solution:

Try to surround the inside of the elements (h1, h2, etc) with a div and give it a class like editable-inner that you target. The only downside is that it will wrap your inside content in p tags ( <h1><p>content</p></h1> ). However, it's a quick and easy solution. Don't forget to update your selector in the javascript!

JS:

my_wysiwyg_settings = {
    selector: "h1.wysiwyg>div.editable-inner",
    ...
}

HTML:

<h1 class='wysiwyg'>
   <div class='editable-inner'>
       <!-- WYSIWYG content is added here -->
   </div>
</h1>

When initiated, it turns into this:

<h1 class='wysiwyg'>
   <div class='editable-inner'>
        <p style="text-align:center;">Some content!!</p>
   </div>
</h1>

Second solution You can also make a custom button which adds a class to the outer parent tag instead of surrounding the inner contents with a

HTML:

<h1 class='wysiwyg'>
   <!-- WYSIWYG content is added here -->
</h1>

JS:

     my_wysiwyg_settings = {
        selector: "h1.wysiwyg",
        toolbar: "myHeadingAlignLeft myHeadingAlignCenter myHeadingAlignRight", //add custom buttons to toolbar
        setup: function(editor) {  //define button function
            editor.addButton('myHeadingAlignLeft', {
                icon: 'alignleft',
                onclick: function() {
                    addClass(editor.id,'align-left'); //back-end function below
                    // or use this front-end function: //$('#' + editor.id).css({'textAlign' : 'left'});
                }
            });

        editor.addButton('myHeadingAlignCenter', {
            icon: 'aligncenter',
            onclick: function() {
                addClass(editor.id,'align-center');
            }
        });

        editor.addButton('myHeadingAlignRight', {
            icon: 'alignright',
            onclick: function() {
                addClass(editor.id,'align-right');
            }
        });    
...
};

function addClass(id, className) {
    $.ajax({
        type: 'POST',
        ... //rest of ajax request here...
    });
}

CSS:

.align-left{ text-align:left;}
.align-right{text-align:right;}
.align-center{text-align:center;}