I'm trying to customize the default styleselect toolbar menu so I can add to it a custom menu element. The idea is to place font size as a styleselect submenu:
I initialized a TinyMCE 4.0.5 in the following way:
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 } ); As I'm not able to find how to customize the default styleselect menu I'm also trying to create a complete new menu where i can add font size control. But I don't want to show any toolbar, I want a single menu bar.
EDIT: Right now I'm trying to modify the styleselect menu using the following code, but fontselect and fontsizeselect appear 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' }] As of version 4.0.13 there is now a new property you can use during init called style_formats_merge. Set this property to true and it will concatenate your styles onto the 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%' } } ] } ] });
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' } } ] }] If you also need to remove elements from the defaults, you can simply copy/paste them from the source code on Github and adjust them as you wish:
tinymce.init({ style_formats: [ // Add the defaults from above ] // ... }
EDIT Updated URL thanks to @lucas-moeskops comment :)
