español - Cómo tomar rumbo(h1, h2, h3) directamente en la barra de herramientas en Tinymce 4

wysiwyg editor free

Question

Quiero cambiar el encabezado (h1, h2, h3) directamente en la barra de herramientas (como Tinymce versión 3) porque lo uso mucho cuando creo un nuevo Artical. Estoy tratando de buscar en internet pero no encontré ninguna respuesta. Por favor, ayúdame. Muchas gracias

Answer 1

Esta respuesta llega seguramente tarde, pero tal vez pueda ayudar a otras personas como yo, la gente está buscando respuestas para la misma pregunta. Lo leí aquí: http://blog.ionelmc.ro/2013/10/17/tinymce-formatting-toolbar-buttons/

Primero, tienes que crear el 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);
         }
     })
  });
});

Y luego utilízalo en tu barra de herramientas:

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

Answer 2

Refiriéndose a esta pregunta en el foro TINYMCE:

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

Usa estos params en la 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''}
            ]}
        ]

Answer 3

Usando lo siguiente funcionó para mí

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

Answer 4

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

Esta es una forma más rápida de agregar H1, Párrafo y otras opciones a su barra de herramientas en TinyMCE 4.

Para obtener una lista completa, consulte: http://www.tinymce.com/wiki.php/Controls Específicamente la sección ''Core''. Eso muestra las herramientas más utilizadas.