Is it possible to add new menu items in file menu of tinymce for cutomization?
I have found the solution to edit or disable the file menu. i.e
tinymce.init({
selector: "textarea",
menubar: "edit format"
});
Disable menubar:
tinymce.init({
selector: "textarea",
menubar: false
});
But no way to cutomize hat file menu
Any Idea?
Possible duplicate: Is it possible to have custom Functions and commands in the TinyMCE4 Menubar?
// Adds a custom menu item to the editor that inserts contents when clicked
// The context option allows you to add the menu item to an existing default menu
tinymce.init({
...
setup: function(ed) {
ed.addMenuItem('example', {
title: 'My menu item',
context: 'tools',
onclick: function() {
ed.insertContent('Hello world!!');
}
});
}
});
Related
The default added button is always at the end of the toolbar.
How do I set the position of the addButton?
And not at the end of the toolbar.
You can specify button ordering in TinyMCE with the toolbar configuration option.
For example, the following config will add the custom button before the bold button:
tinymce.init({
selector: '#editor',
toolbar: 'myCustomToolbarButton bold',
setup: (editor) => {
editor.ui.registry.addButton('myCustomToolbarButton', {
text: 'My Custom Button',
onAction: () => alert('Button clicked!')
});
}
});
On a form, I work with TinyMCE for editing textarea's.
Now I just want to offer the options "bold", "italic" and "underline" in TinyMCE.
Which settings should I do in the tinymce.init();?
See the tinymce fiddle here.
Here is the code:
tinymce.init({
selector: "textarea", // change textareas into tinymce editors
plugins: [], // no additional plugins needed
toolbar: "bold italic underline", // only those three buttons
menubar: false // no display of the top menubar
});
I'd like it to simply be labeled "Font" as this is more useful to my non technical users. I can't seem to find a way to do this. Using version 4.x
you can change it in the tinymce.min.js file. just search for the text "Font Family" and you will see where you can change it.
You can do this by changing the default value in tinymce.min.js file. Just search for the code part beginning with:
{type:"listbox",text:"Font Family",tooltip:"Font Family",values:i,
...
Then put your desired label (for example "Font") inside the text:"". After change it should be look like :
{type:"listbox",text:"Font",tooltip:"Font Family",values:i,.
Result:
If you want to do this programmatically, for example create a button that will change label on click you can add this code when initializing tinyMCE:
<script type="text/javascript">
tinymce.init({
selector: 'textarea',
toolbar1: 'fontselect fontsizeselect mybutton',
//...
// extra coding can go here
//...
setup: function(editor) {
editor.addButton('mybutton', {
text: 'My button',
icon: false,
onclick: function() {
var fontlabel = "Font";
document.getElementsByTagName("button")[4].firstChild.innerText = fontlabel;
// getElementsByTagName is an array, so the index changes belonging to
// position of your "FontFamily" dropdown. In my example it' 6th.
}
});
}
});
</script>
Before:
After:
I'm using TinyMCE 4 for editing content.
I need to add a custom button that adds a row on a table when clicked.
TinyMCE 4 has a function to do that but i'm not sure how to call it.
I'm trying with $('#myTable tr:last').after('<tr></tr>');.
Here's an example.
<script type="text/javascript">
tinymce.init({
selector: "textarea",
toolbar: "mybutton",
setup: function(editor) {
editor.addButton('mybutton', {
text: 'My button',
icon: false,
onclick: function() {
$('#myTable tr:last').after('<tr></tr>');
}
});
}
});
</script>
With the cursor placed inside the table, you can modify your code to look like this:
setup: function(editor) {
editor.addButton('mybutton', {
text: 'My button',
icon: false,
onclick: function() {
editor.execCommand('mceTableInsertRowAfter', false, editor);
}
});
}
See example - tinyMCE fiddle
>>but i'm not sure how to call it.
You add a button to the editor by adding the button in the toolbar -
tinyMCE.init({
...
toolbar1 : 'mybutton'
});
How do I remove a button from the TinyMCE toolbar?
Do I directly edit the tiny_mce.js file? If so, where? Do I edit my theme's editor_template.js file?
Any instruction or hints would be appreciated.
You can define exactly what you want on the toolbar with the advanced theme and you wind up just specifying a list of buttons. See http://wiki.moxiecode.com/index.php/TinyMCE:Configuration for the configuration reference or the examples at http://tinymce.moxiecode.com/examples/full.php
In case you need to remove button dynamically, you can use following technique:
tinymce.init({
selector: "textarea",
toolbar: "custom",
formats: {custom: {inline: "span", styles: {color: "red"}}},
setup: function(editor){
editor.addCustomButton = function () {
if(this.customButton){
this.customButton.show();
} else {
this.addButton("custom", {
onpostrender: function() {
editor.customButton = this; //saving button reference
}
});
}
};
editor.removeCustomButton = function () { this.customButton.hide(); };
}
});
Now you can call editor's methods addCustomButton and removeCustomButton from wherever you need.