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

Answer 1

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

Answer 2

        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.