TinyMCE customize file menubar
Version 4 is a major rewrite and the docs were out of sync for a while.
Through experimentation, I discovered that it is possible to enable/disable the drop-downs individually or disable the whole menubar.
Enable specific drop downs only:
tinymce.init({
selector: "textarea",
menubar: "edit format"
});
Disable menubar:
tinymce.init({
selector: "textarea",
menubar: false
});
The menubar configuration docs have now been added to TinyMCE site.
Also, if you want to completely customize the whole menu, check out the menu configuration docs.
TinyMCE 4 add drop down menu to menu bar
You can try to specify both 'menu' and 'menubar' option when you call tinymce.init() to add a new menubar item on the modern theme.
I tried it and it works.
You can check the live demo on http://fiddle.tinymce.com/39eaab/1 with TinyMCE 4.1.7.
<script type="text/javascript">
tinymce.init({
selector: "textarea",
menu : {
file : {title : 'File' , items : 'newdocument'},
edit : {title : 'Edit' , items : 'undo redo | cut copy paste pastetext | selectall'},
insert : {title : 'Insert', items : 'link media | template hr'},
view : {title : 'View' , items : 'visualaid'},
format : {title : 'Format', items : 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
table : {title : 'Table' , items : 'inserttable tableprops deletetable | cell row column'},
tools : {title : 'Tools' , items : 'spellchecker code'},
newmenu: {title : 'New Menu', items : 'newmenuitem'}
},
menubar: 'file edit newmenu',
setup: function(editor) {
editor.addMenuItem('newmenuitem', {
text: 'New Menu Item',
context: 'newmenu',
onclick: function () { alert('yey!'); }
});
}
});
</script>
<form method="post" action="dump.php">
<textarea name="content"></textarea>
</form>
Remove menu and status bars in TinyMCE 4
I looked at the source and it was fairly obvious:
tinyMCE.init({
menubar:false,
statusbar: false,
//etc
})
This removes both.
You can also customise what parts of the default menu bar are visible by specifying a string of enabled menus - e.g. menubar: 'file edit'
You can define your own menus like this:
menu : {
test: {title: 'Test Menu', items: 'newdocument'}
},
menubar: 'test'
how to change the name of tinymce menubar items
TinyMCE is already localized into a large number of languages including Spanish so you don't need to do this manually.
https://www.tiny.cloud/docs/configure/localization/#language
https://www.tiny.cloud/docs/configure/localization/#usingthecommunitylanguagepacks
Assuming you have the correct language pack downloaded and deployed into the correct place you simply need to tell TinyMCE to use that language pack:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
language: 'es'
});
Tiny MCE - Remove 'FIle' option from Menu
You can configure this with the menubar
option.
tinymce.init({
selector: 'textarea', // change this value according to your HTML
menubar: 'edit insert view format table tools' // skip file
});
Customize tinymce 4.0.5 styleselect toolbar menu
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' } }
]
}]
Related Topics
Grabbing Style.Display Property via Js Only Works When Set Inline
Jquery Calendar Time Selection Suggestion
How to Override Inline CSS Through JavaScript
Iframe Dynamic Height Width Change Based on Inner Content
Using 'Order' Property to Position Flex Item Between Siblings
How to Change <Body> Tag Style from Child Component
Find JavaScript Code That Changes Particular CSS Properties
How to Find Element Has Specific Color Using Jquery
Angular - Ngfor* Four Elements on Row
Animating Max-Height with Pure Js
Check Visibility of an Object with JavaScript
Rotating Clickable Elements in IE8+
How to Measure the Space That a Text Will Take in JavaScript
Need to Load Image as Modal on Click in Bootstrap CSS