Geek Answers Handbook

Customize tinymce 4.0.5 styleselect toolbar menu

I am trying to customize the styleselect toolbar styleselect by default, so I can add a custom menu item to it. The idea is to put the font size in the styleselect submenu:

I initialized TinyMCE 4.0.5 as follows:

  tinymce.init (
                 {
                     language_url: '/webobbywebapp/js/tiny_mce/language/es.js',
                     selector: 'textarea',
                     plugins: "image, link, print",
                     toolbar: "styleselect | undo redo | removeformat | bold italic underline | aligncenter alignjustify | bullist numlist outdent indent | link | print | fontselect fontsizeselect",
                     menubar: false,
                     statusbar: true,
                     resize: true
                 }
             );

Since I cannot find how to set the default style menu, I am also trying to create a completely new menu in which I can add font size control. But I do not want to show any toolbar, I want one menu bar.

EDIT: right now I'm trying to change the styleselect menu using the following code, but fontselect and fontsizeselect appear to be disabled

  , style_formats:
 [{
     title: "Headers_",
     items: [{title: "Header 1", format: "h1"}, {title: "Header 2", format: "h2"}, {title: "Header 3", format: "h3"}, {title : "Header 4", format: "h4"}, {title: "Header 5", format: "h5"}, {title: "Header 6", format: "h6"}]
 }, 
             {title: "_Inline", items: [{title: "Bold", icon: "bold", format: "bold"}, {title: "Italic", icon: "italic", format: "italic"}, 
             {title: "_Underline", icon: "underline", format: "underline"}, {title: "Strikethrough", icon: "strikethrough", format: "strikethrough"}, {title: "Superscript", icon: " superscript ", format:" superscript "}, {title:" Subscript ", icon:" subscript ", format:" subscript "}, {title:" Code ", icon:" code ", format:" code "}] }, 
             {title: "_Blocks", items: [{title: "Paragraph", format: "p"}, {title: "Blockquote", format: "blockquote"}, {title: "Div", format: "div" }, {title: "Pre", format: "pre"}]}, 
             {title: "_Alignment", items: [{title: "Left", icon: "alignleft", format: "alignleft"}, {title: "Center", icon: "aligncenter", format: "aligncenter"}, {title: "Right", icon: "alignright", format: "alignright"}, {title: "Justify", icon: "alignjustify", format: "alignjustify"}]}, 
             {title: "Classes", items: 'fontsizeselect'},
     {title: "dddClasses", items: 'fontselect'
 }]
+7
tinymce tinymce-4
source share
3 answers

Finally, adding the following code did the trick:

     , style_formats: [
          {
            title: "Headers",
            items: [
              {title: "Header 1", format: "h1"},
              {title: "Header 2", format: "h2"},
              {title: "Header 3", format: "h3"},
              {title: "Header 4", format: "h4"},
              {title: "Header 5", format: "h5"},
              {title: "Header 6", format: "h6"}
            ]
         },
         {
              title: "Inline", items: [{title: "Bold", icon: "bold", format: "bold"}, {title: "Italic", icon: "italic", format: "italic"}, 
             {title: "_Underline", icon: "underline", format: "underline"}, {title: "Strikethrough", icon: "strikethrough", format: "strikethrough"}, {title: "Superscript", icon: " superscript ", format:" superscript "}, {title:" Subscript ", icon:" subscript ", format:" subscript "}, {title:" Code ", icon:" code ", format:" code "}] }, 
             {title: "_Blocks", items: [{title: "Paragraph", format: "p"}, {title: "Blockquote", format: "blockquote"}, {title: "Div", format: "div" }, {title: "Pre", format: "pre"}]}, 
             {title: "_Alignment", items: [{title: "Left", icon: "alignleft", format: "alignleft"}, {title: "Center", icon: "aligncenter", format: "aligncenter"}, {title: "Right", icon: "alignright", format: "alignright"}, {title: "Justify", icon: "alignjustify", format: "alignjustify"}]}, 
             {
                 title: "Font Family",
                 items: [
                     {title: 'Arial', inline: 'span', styles: {'font-family': 'arial'}},
                     {title: 'Book Antiqua', inline: 'span', styles: {'font-family': 'book antiqua'}},
                     {title: 'Comic Sans MS', inline: 'span', styles: {'font-family': 'comic sans ms, sans-serif'}},
                     {title: 'Courier New', inline: 'span', styles: {'font-family': 'courier new, courier'}},
                     {title: 'Georgia', inline: 'span', styles: {'font-family': 'georgia, palatino'}},
                     {title: 'Helvetica', inline: 'span', styles: {'font-family': 'helvetica'}},
                     {title: 'Impact', inline: 'span', styles: {'font-family': 'impact, chicago'}},
                     {title: 'Open Sans', inline: 'span', styles: {'font-family': 'Open Sans'}},
                     {title: 'Symbol', inline: 'span', styles: {'font-family': 'symbol'}},
                     {title: 'Tahoma', inline: 'span', styles: {'font-family': 'tahoma'}},
                     {title: 'Terminal', inline: 'span', styles: {'font-family': 'terminal, monaco'}},
                     {title: 'Times New Roman', inline: 'span', styles: {'font-family': 'times new roman, times'}},
                     {title: 'Verdana', inline: 'span', styles: {'font-family': 'Verdana'}}
                 ]
             },
     {title: "Font Size", items: [
                                 {title: '8pt', inline: 'span', styles: {fontSize: '12px', 'font-size': '8px'}},
                                 {title: '10pt', inline: 'span', styles: {fontSize: '12px', 'font-size': '10px'}},
                                 {title: '12pt', inline: 'span', styles: {fontSize: '12px', 'font-size': '12px'}},
                                 {title: '14pt', inline: 'span', styles: {fontSize: '12px', 'font-size': '14px'}},
                                 {title: '16pt', inline: 'span', styles: {fontSize: '12px', 'font-size': '16px'}}
 ]
 }]
+4
source share

Starting with version 4.0.13 there is now a new property that you can use during init with the name style_formats_merge . Set this property to true, and it combines your styles into a default set.

 tinymce.init({ style_formats_merge: true, style_formats: [ { title: 'Line Height', items: [ { title: 'Normal Line Height', inline: 'span', styles: { "line-height": '100%' } }, { title: 'Line Height + 10%', inline: 'span', styles: { "line-height": '110%' } }, { title: 'Line Height + 50%', inline: 'span', styles: { "line-height": '150%' } }, { title: 'Line Height + 100%', inline: 'span', styles: { "line-height": '200%' } } ] } ] });
+6
source share

If you also need to remove the elements from the default values, you can simply copy / paste them from the source code on Github and configure them as you wish:

 tinymce.init({ style_formats: [ // Add the defaults from above ] // ... }

EDIT Updated URL thanks to @ lucas-moeskops comment :)

+2
source share

More articles:


All Articles