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

i have h1 or h2 etc. tag root element apply tinymce inline editor to.

i want allow user align text right or center it.

however, tinymce allows h1s have text-align attribute when contained within div.

alternatively, there way have div, allowed have single h1 element, , no other elements?

 

i have tried following option in tinymce.init after making root element div instead of h1.

valid_elements: 'h1'

which didn't work, , tried

valid_elements: 'h1/p'

which convert ps h1s, after editor closed , reopened, not while user typing.

the problem here when apply text-align property it's wrapping text in span tag (or other tag.. i.e. strong, etc). works formatting doesn't work text-align. reason why because tex-align has applied parent tag, not interior of it. it's if told center square within square that's exact same size. it's same if left-align, right-align or center-align because there's no space move around in. can see mean on fiddle: http://jsfiddle.net/f8meyapv/1/

i have 2 solutions you.

first solution:

try surround inside of elements (h1, h2, etc) div , give class editable-inner target. downside wrap inside content in p tags (<h1><p>content</p></h1>). however, it's quick , easy solution. don't forget update selector in javascript!

js:

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

html:

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

when initiated, turns this:

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

second solution can make custom button adds class outer parent tag instead of surrounding inner contents

html:

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

js:

     my_wysiwyg_settings = {         selector: "h1.wysiwyg",         toolbar: "myheadingalignleft myheadingaligncenter myheadingalignright", //add custom buttons 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 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;}