How to add heading (h1, h2...) buttons to tinyMCE with advanced theme, simple layout?

Question

I have a tinyMCE editor which uses the advanced theme. I am using the simple layout on that advanced theme so I can define my own toolbars on init() without having to get too deep into what tinyMCE is doing.

The problem I have is that my editor doesn't have buttons for adding heading elements. I am desperately in need of this option but can find no practical advice on the subject.

Everything I'm doing happens inside the tinymce.init() function, which I have pasted below:

$("textarea.tinymce").not(".simple").tinymce({
            script_url : "/_lib/script/tiny_mce/tiny_mce.js",
            plugins : "wordcount,paste,spellchecker,table",
            theme : "advanced",
            theme_advanced_layout_manager : "SimpleLayout",
            theme_advanced_statusbar_location : "bottom",
            theme_advanced_toolbar_location : "top",
            theme_advanced_buttons1
                : "bold,italic,underline,strikethrough,|,sub,sup,|,charmap,|,forecolorpicker",
            theme_advanced_buttons2
                : "undo,redo,|,cut,copy,pastetext,pasteword,|,link,unlink,anchor,|,image,code",
            theme_advanced_buttons3 : "",
            theme_advanced_toolbar_align : "left",
            height : 480,
            apply_source_formatting : false,
            convert_fonts_to_spans : true
        });

I am using the jquery plugin to access tinyMCE ( I'm sure this has nothing to do with my question but it explains the code ).

One idea I had was to use the theme_advanced_styles option but I don't think this will allow me to insert actual heading tags, but rather just style my markup with spans and whatnot to look like a header.

Any ideas greatly appreciated. Cheers, J

Answer 1

Here is a button which will make a heading1 out of a paragraph. Add 'formath1' to your buttonlist and add this to your tinymce init

setup : function(ed){
    ed.addButton('formath1', // name to add to toolbar button list
    {
        title : 'Make h1', // tooltip text seen on mouseover
        image : 'http://myserver/ma_button_image.png',
        onclick : function()
        {
        ed.execCommand('FormatBlock', false, 'h1');
        }
    });
},

Answer 2

Adding headings and other elements with implicit styling can be added via formatselect with theme: 'advanced' instances' theme_advanced_buttons_[1-3] list:

tinyMCE.init({
    mode : 'textareas',
    theme : 'advanced',
    editor_selector : 'mceAdvanced',
    plugins: 'autolink,inlinepopups',
    theme_advanced_blockformats: 'p,address,pre,h1,h2,h3,h4,h5,h6',
    theme_advanced_buttons1: 'formatselect,|,bold,italic,removeformat',
    theme_advanced_buttons2: '',
    theme_advanced_buttons3: '',
    theme_advanced_toolbar_location: 'top',
    theme_advanced_statusbar_location: 'bottom',
    theme_advanced_resizing: true,
    theme_advanced_resize_horizontal: false,
    relative_urls: false
});

I superfluously-included the default values just for demonstration but the TinyMCE Wiki states that, since 2010-10-28 this element list can be reduced or added to with elements including:

 `p,div,h1,h2,h3,h4,h5,h6,blockquote,dt,dd,code,samp`

Answer 3

I found the heading plugin to be just a perfect solution for this problem. The accepted answer works ok, too. The only issue we found is that the heading button does not appear active when your cursor is at a heading, thus making it non-intuitive that you can press the button again to revert the formatting. The heading plugin correctly displays an active state.