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

Digamy

do you want a dropdown or is it sufficient enough for you if you have a button for each heading element? – Grilse

A button would be absolutely fine. – Digamy

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

Grilse

Sincerely appreciated. This is just what I've been lookin for! May I ask if there is any particular documentation I should be looking at to be in a position to know this stuff? I can't find much other than the configuration options at tinymce.com/wiki.php/Configuration – Digamy

glad to have been able to help. that page holds it all, but it takes some time to get to know how to use them – Grilse

@Grilse - Is it possible to do this with only the text they've highlighted? – Home

@Webnet: this is possible, but in this case the highligthed text gets put into one or several spans with the class choosen. Are you looking for a paragraph solution (assign a class to the paragraphs affected by the hioghlighted text) or a solution only affecting the highlughted text? – Grilse

@Thariama: Something for highlighted text – Home

@webnet: does the style plugin then not suffice? – Grilse

@Grilse - "FormatBlock" applies to the whole paragraph. I've looked for a simple alternative but can't find one. – Home

@webnet: try using 'style' as plugin and 'styleselect' as button - that should do it – Grilse

@Grilse - I added style to the plugins list and styleselect to the buttons list and it added a style dropdown with no options. Did I misunderstand you what you were saying? – Home

you can define them using the setting described here: tinymce.com/wiki.php/Configuration:style_formats – Grilse

Unfortunately, the button has no active state, showing that the current selection already is a header. – Horsecar

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`

Barner

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.

Horsecar