Javascript 如何在TinyMCE 4中向自定义菜单添加多个元素,并在单击时在编辑器画布上显示其内容?
我试图在TinyMCE4中添加一个具有不同选项的菜单,当我单击一个元素时,会在编辑器画布中显示该选项的文本。我成功地添加了菜单,其中只有一个选项,我找到了以下代码:Javascript 如何在TinyMCE 4中向自定义菜单添加多个元素,并在单击时在编辑器画布上显示其内容?,javascript,tinymce,tinymce-4,Javascript,Tinymce,Tinymce 4,我试图在TinyMCE4中添加一个具有不同选项的菜单,当我单击一个元素时,会在编辑器画布中显示该选项的文本。我成功地添加了菜单,其中只有一个选项,我找到了以下代码: tinymce.init({ language: 'es', selector: '#plantillaEditor', height : '500', width : '300', menu : {
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);
}
}
});
然后是包含多个元素的设置参数:
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); }
});
},
但它似乎不起作用
2) 第二个问题是,当单击元素时,我不知道如何检索菜单上选项的文本值。当我记录“this”时,我在对象的属性中进行了搜索,但找不到保存该项值的道具
有人知道我怎么做这两件事吗
编辑:我解决了问题#1)…这只是一个输入错误,设置:参数的正确代码是:
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); }
> });
> },
这个问题仍然没有解决。我尝试使用javascript和jquery将菜单选项的文本内容登录到控制台,但运气不好,对象返回正确,但是当我使用javascript控制台筛选对象的属性时,我找不到属性 我相信
此
返回的对象的设置属性将满足您的需要:
editor.addMenuItem('menuitem1', {
text: 'Text for Menu Item 1',
context: 'tags',
onclick: function () {
console.log(this.settings.text);
}
});
请注意,您甚至可以向传递给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);
}
});
第二个
console.log
引用的是customAttrib
属性,该属性不是必需属性的一部分。TinyMCE只是希望有一个有效的JavaScript对象,这样你就可以把你喜欢的东西放进去,只要你把TinyMCE需要的东西放进去。回答得好,我的朋友。我现在可以在警报中看到该值。但是,我试图将它附加到保存编辑器内容的textarea div中,但没有附加$(“#plantillaEditor”).append(this.settings.text);它不会抛出任何错误。我还尝试了$(“#plantillaEditor”).html(this.settings.text);和$(“#plantillaEditor”).text(this.settings.text);和$(“#plantillaEditor”).val(this.settings.text);没有任何成功……难道你不知道怎么做吗?我已经解决了这个问题,要在当前位置上插入一些东西,一旦单击菜单项,你可以使用:tinymce.activeEditor.execCommand('mceinsercontent',false,“要插入的文本”);
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);
}
});