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');
        }
    });
},