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

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:

enter image description here


        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.


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

Tags:

Tinymce 4