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

do you want a dropdown or is it sufficient enough for you if you have a button for each heading element? — Thariama, Jan 05 '12 at 12:00

score 18 · Accepted Answer · answered Jan 05 '12 at 13:16

18

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

answered Jan 05 '12 at 13:16

Thariama

50,002
13
138
166

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 http://www.tinymce.com/wiki.php/Configuration – Joe Green Jan 05 '12 at 13:37
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 – Thariama Jan 05 '12 at 13:56
1

@Thariama - Is it possible to do this with only the text they've highlighted? – Ben May 15 '12 at 18:03
@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? – Thariama May 21 '12 at 08:21
@Thariama: Something for highlighted text – Ben May 21 '12 at 13:35
@webnet: does the style plugin then not suffice? – Thariama May 21 '12 at 13:52
@Thariama - "FormatBlock" applies to the whole paragraph. I've looked for a simple alternative but can't find one. – Ben May 21 '12 at 14:08
@webnet: try using 'style' as plugin and 'styleselect' as button - that should do it – Thariama May 22 '12 at 08:25
@Thariama - 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? – Ben May 22 '12 at 12:14
you can define them using the setting described here: http://www.tinymce.com/wiki.php/Configuration:style_formats – Thariama May 22 '12 at 12:34
Unfortunately, the button has no active state, showing that the current selection already is a header. – Adrian Heine Aug 28 '13 at 07:30

Alastair · Answer 2 · 2013-03-15T17:39:42.980

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`

score 3 · Answer 3 · answered Aug 28 '13 at 07:32

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.

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

3 Answers3