tinymce 4
Tutoriales y plugins  tinymce

Personalizar toolbar del editor tinymce

Podremos personalizar el toolbar del editor a nuestro antojo. Podremos añadir cuantos botones en el orden que nos apetezca, incluir separadores, incluso nuestros propios botones, o controles de listas o plugins.

Para poder personalizar el toolbar solo tendremos que añadir la siguiente linea en inicializador de tinymce:
toolbar: [boton1, boton2, etc].

El siguiente ejemplo añadiremos unos cuantos botones.

tinymce.init({ 
    selector: 'div#mi_id',
    inline: true,
    toolbar: ['undo redo | bold italic underline']
});
Este ejemplo mostrará en el toolbar los controles de undo, redo luego un separador y a posterior tres botones para negrita, cursiva y subrayado. En la siguiente imagen puedes ver el resultado.



Listado de controles por defecto que puedes incluir en el toolbar

Todos estos controles pueden ser añadidos sin necesidad de incluir plugins adicionales.

  • newdocument
  • undo
  • redo
  • cut
  • copy
  • paste                     (algunos navegadores como safari no funciona)
  • selectall
  • bold
  • italic
  • underline
  • strikethrough      (tachado)
  • subscript
  • superscript
  • removeformat     (elimina el formato agregado)
  • styleselect             (formats: crea un desplegable con todas las opciones de formatos).

Listado de controles no incluidos por defecto

Los siguientes controles deben ser incluidos como un plugin. Los plugins que aqui indicamos ya vienen incluido dentro del paquete de tinymce pero no se cargan por defecto. Es una forma de optimizar y dar la posibilidad de cargar aquellos plugins que sean necesario. 

Para incluir un plugin dentro de tinimce es muy simple, solo debes incluir la siguiente linea al inicializador: 
plugins : 'paste image link'

tinymce.init({ 
    selector: 'div#mi_id',
    inline: true,
    menubar:false, //ocultamos el menu
    plugins: 'link image',
    toolbar: ['undo redo | bold italic underline | link image']
});




Listado de plugins incluidos en tinymce


Añadir un h2, h3 o p en el toolbar

Veremos si queremos añadir por ejemplo un h2 veremos que no funciona. Esto se debe que un toolbar acepta plugins. Y los h2, h3 están dentro de un plugin. Para añadir un h2 con forma de botón dentro del toolbar tendremos que crear una función en javascript.



La siguiente función en javascript crea un plugin y lo añade a tinymce. Le hemos dado el nombre de "stylebuttons".

tinymce.PluginManager.add('stylebuttons', function(editor, url) {


Dentro hemos indicado los elementos que queremos que contenga. Hemos incluido pre, p, code, y los h del h1 al h6.

['pre', 'p', 'code', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach(function(name){


A los botones le hemos llamado style-?, quedarían style-pre, style-p, style-code, etc.

editor.addButton("style-" + name, {

En el inicializador de tinymce Solo tenemos que incluir este nuevo plugin.

plugins : 'stylebuttons',

Y ya dentro del toolbar indicar los botones que queremos mostrar.
toolbar: ['undo redo | bold italic underline | style-p style-h1 style-h2 style-h3 style-h4']


Código completo

<script>

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);
                }
           });
     });
});
tinymce.init({ 
    selector: 'div#mi_id',
    plugins : 'stylebuttons',
    toolbar: ['undo redo | bold italic underline | style-p style-h1 style-h2 style-h3 style-h4']
});
</script>