How to add multiple elements to a custom menu in TinyMCE 4 and display their content on the editor canvas when clicked?
I am trying to add a menu with different options in TinyMCE4 and when I click on an element, the text of that option is displayed in the editor canvas. I have successfully added a menu with only one option using the following code I found:
tinymce.init({
language: 'es',
selector: '#plantillaEditor',
height : '500',
width : '300',
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 : 'code'},
tags: {title : 'Etiquetas', items : 'newmenuitem'}
},
menubar: 'file edit format table tags',
setup: function(editor) {
editor.addMenuItem('newmenuitem', {
text: 'new menu',
context: 'tags',
onclick: function () { console.log(this); }
}
);
},
readonly: ((getUrlVars()["mode"]=='view') ? true : false),
plugins:'image imagetools link fullscreen fullpage textcolor colorpicker advlist autolink autosave charmap code contextmenu insertdatetime save print table',
toolbar: "customToolbar undo redo | save | print | styleselect | forecolor backcolor | bold italic | "+
"alignleft aligncenter alignright alignjustify | table bullist numlist outdent indent | "+
" link | image | charmap code | insertdatetime",
insertdatetime_formats: ["%H:%M", "%d-%m-%Y", "%S:%M:%I %p", "Buenos Aires, %d de %B de %Y"],
contextmenu: "copy | cut | paste | link image imageupload | cell row column deletetable",
autosave_interval: "60s",
paste_data_images: true,
save_onsavecallback: function () {
var bodyHtml=$editor.val().match(/(?:.(?!<\s*body[^>]*>))*\>.+/)[0];
var mode='<?php echo $mode?>';
var namePattern;
var namePrefix;
var textAreaName;
if(mode!=='user'){
var request = $.ajax({
type: 'POST',
url: '/editor/processDataHtml',
data: { editorData: bodyHtml,
id_acto_doc_plantilla : '<?php echo $id_acto_doc_plantilla; ?>'
},
success: function(data) {
alert(data);
},
error: function(data) {
alert(data);
}
})
}else{
$htmlInputParent.val(bodyHtml);
}
}
});
I had to fix 2 things:
1) How to add multiple elements to the menu? There is no documentation on the "setup:" parameter of the show and example, I tried adding another "date" element to the menu:
tags: {title : 'Etiquetas', items : 'newmenuitem date'}
Then the setup parameter with multiple elements:
setup: function(editor) {
editor.addMenuItem('newmenuitem', {
text: 'new menu',
context: 'tags',
onclick: function () { console.log(this); }
}),
editor.addMenuItem('date', {
text: 'Date',
context: 'tags',
onclick: function () { console.log(this); }
});
},
but this doesn't seem to work.....
2) The second problem is that I don't know how to retrieve the text value of the option on the menu when the element is clicked. When I log "this", I've searched in the properties of the object and can't find a prop that holds the value of that item.
Does anyone know how I can do these two things?
EDIT: I solved problem #1)....it was just a typo, the correct code for the setup: parameter is:
tags: {title : 'Etiquetas', items : 'newmenuitem date'},
> setup: function(editor) {
> editor.addMenuItem('newmenuitem', {
> text: 'new menu',
> context: 'tags',
> onclick: function () { console.log(this); }
> });
> editor.addMenuItem('date', {
> text: 'Date',
> context: 'tags',
> onclick: function () { console.log(this); }
> });
> },
Problem 2) still doesn't work. I've tried logging the text content of the menu option to the console using javascript and jquery with no luck, the object is returned correctly, but when I filter the properties of the object using the javascript console, the property is not found... ..
I believe the set property of the this
returned object will have what you need:
editor.addMenuItem('menuitem1', {
text: 'Text for Menu Item 1',
context: 'tags',
onclick: function () {
console.log(this.settings.text);
}
});
Note that you can even add custom properties to the object passed to the addMenuItem
method and access them at runtime:
editor.addMenuItem('menuitem1', {
text: 'Text for Menu Item 1',
customAttrib: 'Colorado Avalanche',
context: 'tags',
onclick: function () {
console.log(this.settings.text);
console.log(this.settings.customAttrib);
}
});
The second console.log
is referencing properties that are customAttrib
not required properties. TinyMCE just expects a valid JavaScript object, so you can put anything in there as long as you put what TinyMCE needs.