[英]How to add more than one element to a custom Menu in TinyMCE 4 and display its content on the editor canvas when clicked?
I'm trying to add a menu with different options in TinyMCE4 and when I click one element the text of the option in the editor canvas. 我试图在TinyMCE4中添加带有不同选项的菜单,当我单击一个元素时,在编辑器画布中显示该选项的文本。 I successfully added the menu with one option only with 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 have to solve 2 things: 我必须解决2件事:
1)How can I add more than one element to the menu?. 1)如何向菜单添加多个元素? There's no documentation on the "setup:" parameter showing and example and I tried adding another "date" element on to the menu: 显示和示例的“ setup:”参数上没有文档,我尝试在菜单上添加另一个“ date”元素:
tags: {title : 'Etiquetas', items : 'newmenuitem date'}
and then the setup parameter with more than one element: 然后是带有多个元素的setup参数:
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 it 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. 2)第二个问题是,单击元素时,我不知道如何检索菜单上选项的文本值。 When I log "this" I've searched among the properties of the object and I couldn't find a prop that holds the value of the item. 当我登录“ this”时,我已经在对象的属性中进行搜索,而找不到能够保存该项目值的道具。
Does someone know how can I do these 2 things? 有人知道我该怎么做这两件事吗?
EDIT: I solved the issue # 1) ....it was just a typo, the correct code for the setup: parameter is: 编辑:我解决了问题#1)....这只是一个错字,setup:参数的正确代码是:
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); }
> });
> },
The issue #2) is still not working. 问题2)仍然无法正常工作。 I tried to log to the console the text content of the menu option using javascript and jquery as well without luck, the object is returned properly but when I filter the properties of the object using javascript console I can't find the attribute..... 我试图使用javascript和jquery将菜单选项的文本内容登录到控制台,但没有运气,该对象已正确返回,但是当我使用javascript控制台过滤该对象的属性时,找不到属性... ..
I believe that the settings attribute of the object that this
returns will have what you need: 我相信, this
返回的对象的settings属性将具有您所需要的:
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 attributes to the object you pass to the addMenuItem
method and access those at runtime: 请注意,您甚至可以向传递给addMenuItem
方法的对象添加自定义属性,并在运行时访问它们:
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 the customAttrib
attribute which is not part of the required attributes. 第二个console.log
引用的customAttrib
属性不是必需属性的一部分。 TinyMCE is just expecting a valid JavaScript object so you can put whatever you like in there as long as you put the things TinyMCE requires. TinyMCE只是期望一个有效的JavaScript对象,因此只要您放置TinyMCE所需的东西,您就可以在其中放置任何内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.