如何在TinyMCE 4中将多个元素添加到自定义菜单中,并在单击时在编辑器画布上显示其内容
How to add more than one element to a custom Menu in TinyMCE 4 and display its content on the editor canvas when clicked?
>我正在尝试在TinyMCE4中添加一个具有不同选项的菜单,当我单击一个元素时,编辑器画布中的选项文本。我仅使用以下代码成功添加了带有一个选项的菜单:
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);
}
}
});
我必须解决两件事:
1(如何在菜单中添加多个元素?没有关于"setup:"参数显示和示例的文档,我尝试在菜单上添加另一个"date"元素:
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); }
});
},
但它似乎不起作用.....
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); }
> });
> },
问题#2(仍然不起作用。我尝试使用 javascript 和 jquery 将菜单选项的文本内容记录到控制台,但没有运气,对象正确返回,但是当我使用 javascript 控制台过滤对象的属性时,我找不到该属性.....
我相信
this
返回的对象的 settings 属性将具有您需要的内容:
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需要的东西放进去,你就可以把任何你喜欢的东西放进去。
相关文章:
- 内容可编辑DIV单击/插入符号设置
- 谷歌地图v3侦听器(单击)-更改URL
- 日期选取器单击事件获取日期
- Ace代码编辑器单击后消失
- 当我单击另一个文件时,如何在 ace 编辑器中更改内容
- 相同的选择器单击添加和删除
- Ctrl+单击Atom编辑器中的函数名称并跳转到该函数名称
- 事件侦听器单击不起作用
- X-可编辑:在“单击以编辑”时停止传播
- 侦听器单击任何元素并读取特定的 HTML-5 自定义属性(如果存在)
- 静音流播放器单击自定义按钮
- 如何在事件侦听器单击后将ID传递给函数
- jQuery选择器单击功能说明
- Struts2自动补全器-单击提交按钮时条目丢失
- 可编辑表(单击时删除文本并添加文本字段)激发次数过多
- 样式切换器单击后会跳到页面顶部
- 谷歌标签管理器.单击{{单击文本}}
- 如何找到文本的锚标记上的编辑按钮单击
- jquery选择器单击事件未使用angular触发
- 使用jquery验证器单击一个按钮即可在同一页面上一次验证多个表单