How to take heading (h1, h2, h3) directly on toolbar in tinymce 4

Question

I wanna change heading (h1,h2,h3) directly on toolbar ( like tinymce version 3) because i use it very much when i create a new artical. I'm trying to search on internet but I didn't find any answers. Please help me. Thanks a lot enter image description here

score 36 · Accepted Answer · answered Jan 27 '14 at 15:46

This answer arrives surely late, but maybe it can help others like me, people how are looking for answer for the same question. I read it here: http://blog.ionelmc.ro/2013/10/17/tinymce-formatting-toolbar-buttons/

First, you have to create the plugin:

tinyMCE.PluginManager.add('stylebuttons', function(editor, url) {
  ['pre', 'p', 'code', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach(function(name){
   editor.addButton("style-" + name, {
       tooltip: "Toggle " + name,
         text: name.toUpperCase(),
         onClick: function() { editor.execCommand('mceToggleFormat', false, name); },
         onPostRender: function() {
             var self = this, setup = function() {
                 editor.formatter.formatChanged(name, function(state) {
                     self.active(state);
                 });
             };
             editor.formatter ? setup() : editor.on('init', setup);
         }
     })
  });
});

And then use it in your toolbar:

tinyMCE.init({
   selector: '#id',
   toolbar: "undo redo | style-p style-h1 style-h2 style-h3 style-pre style-code",
   plugins: "stylebuttons",
});

If you want to get default icons for some buttons such as 'code' instead of text, just remove the prefix "style-" and the *text: name.toUpperCase()* line. — Serg, Aug 05 '18 at 12:31
In Tinymce 6 you'd have to use `editor.ui.registry.addButton` and `onAction` instead of `onClick`. https://www.tiny.cloud/docs/demo/custom-toolbar-button/ — Jan Matuszewski, Mar 29 '22 at 12:06

score 14 · Answer 2 · answered Aug 10 '14 at 23:08

14

        tinymce.init({
            toolbar: 'undo redo | alignleft aligncenter alignright alignjustify | formatselect fontselect fontsizeselect | bullist numlist | outdent indent',
         });

This is a quicker way to add H1, Paragraph and other options to your toolbar in TinyMCE 4.

For a full list see: http://www.tinymce.com/wiki.php/Controls Specificly the 'Core' section. That shows the most commonly used tools.

answered Aug 10 '14 at 23:08

guest

165
1
2

1

This is for the format picker, as on the screenshot supplied by OP. Not what he's asking for. – Denis de Bernardy Sep 07 '14 at 11:39
Actually, if you add the 'formatselect' control, as @guest is doing above, you get this (as of 4.1): Having trouble adding an image to a comment. See http://imgur.com/po9rl9t – jomofrodo Sep 16 '14 at 23:39
Thank you, this worked for me. TinyMCE sucks now, replace it with Summernote.js asap lol – Andy Apr 04 '17 at 20:17
2

As I understand the question was how to put the heading buttons directly on the toolbar which means that for each type of header there should be a separate button. In this sense, the answer doesn't solve the problem. – Serg Aug 05 '18 at 10:15

atoms · Answer 3 · 2019-05-28T07:46:11.663

12

Using the following worked for me

tinymce.init({
    toolbar: 'formatselect',
    block_formats: 'Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;',
});

Editor will look like this:

edited May 28 '19 at 07:46

answered Jan 30 '18 at 16:29

atoms

2,993
2
22
43

This way is very simple. – Nguyen Feb 13 '21 at 04:56

score 4 · Answer 4 · answered Sep 28 '15 at 23:43

Refering to this question on the TINYMCE forum:

http://www.tinymce.com/forum/viewtopic.php?id=32801

Use these params in the config.

style_formats: [
            {title: 'Headers', items: [
                {title: 'h1', block: 'h1'},
                {title: 'h2', block: 'h2'},
                {title: 'h3', block: 'h3'},
                {title: 'h4', block: 'h4'},
                {title: 'h5', block: 'h5'},
                {title: 'h6', block: 'h6'}
            ]},

            {title: 'Inline', items: [
                {title: 'Bold', inline: 'b', icon: 'bold'},
                {title: 'Italic', inline: 'i', icon: 'italic'},
                {title: 'Underline', inline: 'span', styles : {textDecoration : 'underline'}, icon: 'underline'},
                {title: 'Strikethrough', inline: 'span', styles : {textDecoration : 'line-through'}, icon: 'strikethrough'},
                {title: 'Superscript', inline: 'sup', icon: 'superscript'},
                {title: 'Subscript', inline: 'sub', icon: 'subscript'},
                {title: 'Code', inline: 'code', icon: 'code'},
            ]},

            {title: 'Blocks', items: [
                {title: 'Paragraph', block: 'p'},
                {title: 'Blockquote', block: 'blockquote'},
                {title: 'Div', block: 'div'},
                {title: 'Pre', block: 'pre'}
            ]},

            {title: 'Alignment', items: [
                {title: 'Left', block: 'div', styles : {textAlign : 'left'}, icon: 'alignleft'},
                {title: 'Center', block: 'div', styles : {textAlign : 'center'}, icon: 'aligncenter'},
                {title: 'Right', block: 'div', styles : {textAlign : 'right'}, icon: 'alignright'},
                {title: 'Justify', block: 'div', styles : {textAlign : 'justify'}, icon: 'alignjustify'}
            ]}
        ]

How to take heading (h1, h2, h3) directly on toolbar in tinymce 4

4 Answers4