Javascript 将插入按钮添加到微型MCE
我正在开发我自己的插件,添加到tinyMCE v4插件列表中,直到现在我在菜单中添加了一个按钮,当我点击它时打开弹出窗口,然后我可以用数据填写表单,之后它添加到tinyMCE编辑器中,但我在编辑这些信息时遇到了一些问题,我尝试添加一些脚本,但仍然无法工作, 以下是我的源代码: 注1:onclick用于添加新按钮 注2:onpostrender可用于编辑按钮Javascript 将插入按钮添加到微型MCE,javascript,editor,wysiwyg,text-editor,tinymce-4,Javascript,Editor,Wysiwyg,Text Editor,Tinymce 4,我正在开发我自己的插件,添加到tinyMCE v4插件列表中,直到现在我在菜单中添加了一个按钮,当我点击它时打开弹出窗口,然后我可以用数据填写表单,之后它添加到tinyMCE编辑器中,但我在编辑这些信息时遇到了一些问题,我尝试添加一些脚本,但仍然无法工作, 以下是我的源代码: 注1:onclick用于添加新按钮 注2:onpostrender可用于编辑按钮 tinymce.PluginManager.add('buttonlink', function(editor, url) { // Add
tinymce.PluginManager.add('buttonlink', function(editor, url) {
// Add a button that opens a window
editor.addButton('buttonlink', {
text: 'Insert Button',
tooltip: "Insert/edit Button link",
icon: false,
onclick: function() {
// Open window
editor.windowManager.open({
title: 'Button',
body: [
{type: 'textbox', name: 'title', label: 'Title'},
{type: 'textbox', name: 'link', label: 'Link'},
{type: 'listbox', name: 'colorBtn', label: 'Button Color',values:
[
{value:"008000", text:"Green"},
{value:"0000FF", text:"Blue"},
{value:"000000", text:"Black"},
{value:"993300", text:"Burnt orange"},
{value:"333300", text:"Dark olive"},
{value:"003300", text:"Dark green"},
{value:"003366", text:"Dark azure"},
{value:"000080", text:"Navy Blue"},
{value:"333399", text:"Indigo"},
{value:"333333", text:"Very dark gray"},
{value:"800000", text:"Maroon"},
{value:"FF6600", text:"Orange"},
{value:"808000", text:"Olive"},
{value:"008080", text:"Teal"},
{value:"666699", text:"Grayish blue"},
{value:"808080", text:"Gray"},
{value:"FF0000", text:"Red"},
{value:"FF9900", text:"Amber"},
{value:"99CC00", text:"Yellow green"},
{value:"339966", text:"Sea green"},
{value:"33CCCC", text:"Turquoise"},
{value:"3366FF", text:"Royal blue"},
{value:"800080", text:"Purple"},
{value:"999999", text:"Medium gray"},
{value:"FF00FF", text:"Magenta"},
{value:"FFCC00", text:"Gold"},
{value:"FFFF00", text:"Yellow"},
{value:"00FF00", text:"Lime"},
{value:"00FFFF", text:"Aqua"},
{value:"00CCFF", text:"Sky blue"},
{value:"993366", text:"Red violet"},
{value:"FFFFFF", text:"White"},
{value:"FF99CC", text:"Pink"},
{value:"FFCC99", text:"Peach"},
{value:"FFFF99", text:"Light yellow"},
{value:"CCFFCC", text:"Pale green"},
{value:"CCFFFF", text:"Pale cyan"},
{value:"99CCFF", text:"Light sky blue"},
{value:"CC99FF", text:"Plum"}
]
},
{type: 'listbox', name: 'colorText', label: 'Text Color',values:
[
{value:"FFFFFF", text:"White"},
{value:"000000", text:"Black"},
{value:"993300", text:"Burnt orange"},
{value:"333300", text:"Dark olive"},
{value:"003300", text:"Dark green"},
{value:"003366", text:"Dark azure"},
{value:"000080", text:"Navy Blue"},
{value:"333399", text:"Indigo"},
{value:"333333", text:"Very dark gray"},
{value:"800000", text:"Maroon"},
{value:"FF6600", text:"Orange"},
{value:"808000", text:"Olive"},
{value:"008000", text:"Green"},
{value:"008080", text:"Teal"},
{value:"0000FF", text:"Blue"},
{value:"666699", text:"Grayish blue"},
{value:"808080", text:"Gray"},
{value:"FF0000", text:"Red"},
{value:"FF9900", text:"Amber"},
{value:"99CC00", text:"Yellow green"},
{value:"339966", text:"Sea green"},
{value:"33CCCC", text:"Turquoise"},
{value:"3366FF", text:"Royal blue"},
{value:"800080", text:"Purple"},
{value:"999999", text:"Medium gray"},
{value:"FF00FF", text:"Magenta"},
{value:"FFCC00", text:"Gold"},
{value:"FFFF00", text:"Yellow"},
{value:"00FF00", text:"Lime"},
{value:"00FFFF", text:"Aqua"},
{value:"00CCFF", text:"Sky blue"},
{value:"993366", text:"Red violet"},
{value:"FF99CC", text:"Pink"},
{value:"FFCC99", text:"Peach"},
{value:"FFFF99", text:"Light yellow"},
{value:"CCFFCC", text:"Pale green"},
{value:"CCFFFF", text:"Pale cyan"},
{value:"99CCFF", text:"Light sky blue"},
{value:"CC99FF", text:"Plum"}
]
},
],
onsubmit: function(e) {
// Insert content when the window form is submitted
if(e.data.title != null && e.data.title != "") {
editor.insertContent('<a href="' + e.data.link + '" target="_blank" id="btn-link-plugin" class="btn" style="color: #' + e.data.colorText + '; background: #' + e.data.colorBtn + '">' + e.data.title + '</a>');
}
}
});
},
onpostrender: function (buttonApi) {
var btn = this;
var editorEventCallback = function (e) {
var IDElement = e.element.getAttribute('id');
if (btn._id == "mceu_22" && IDElement == "btn-link-plugin") {
var link = e.element.getAttribute('data-mce-href');
var style = e.element.getAttribute('style');
var text = e.element.text;
var res = style.split(";");
var colorStyle = res[0].split(":");
var backgroundStyle = res[1].split(":");
colorStyle[1] = colorStyle[1].replace(/\s+/g, '');
backgroundStyle[1] = backgroundStyle[1].replace(/\s+/g, '');
var colorTxt = colorStyle[1].substr(1);
var backgroundTxt = backgroundStyle[1].substr(1);
editor.windowManager.open({
title: 'Button',
body: [
{type: 'textbox', name: 'title', label: 'Title', value: text},
{type: 'textbox', name: 'link', label: 'Link', value: link},
{
type: 'listbox', name: 'colorBtn', label: 'Button Color', values:
[
{value: "008000", text: "Green"},
{value: "0000FF", text: "Blue"},
{value: "000000", text: "Black"},
],
onPostRender: function() {
this.value(backgroundTxt);
}
},
{
type: 'listbox', name: 'colorText', label: 'Text Color', values:
[
{value: "FFFFFF", text: "White"},
{value: "000000", text: "Black"},
{value: "993300", text: "Burnt orange"},
{value: "333300", text: "Dark olive"},
],
onPostRender: function() {
this.value(colorTxt);
}
},
],
onsubmit: function (e) {
// Insert content when the window form is submitted
if (e.data.title != null && e.data.title != "") {
editor.insertContent('<a href="' + e.data.link + '" target="_blank" id="btn-link-plugin" class="btn" style="color: #' + e.data.colorText + '; background: #' + e.data.colorBtn + '">' + e.data.title + '</a>');
editor.off('NodeChange', editorEventCallback);
}
}
});
}
};
editor.on('NodeChange', editorEventCallback);
return function (buttonApi) {
console.log("off");
editor.off('NodeChange', editorEventCallback);
}
}
});
return {
getMetadata: function () {
return {
name: "Button Link plugin",
url: "https://capoffshore.com"
};
}
};
});
tinymce.PluginManager.add('buttonlink',函数(编辑器,url){
//添加打开窗口的按钮
editor.addButton('buttonlink'{
文本:“插入按钮”,
工具提示:“插入/编辑按钮链接”,
图标:false,
onclick:function(){
//开窗
editor.windowManager.open({
标题:“按钮”,
正文:[
{键入:'textbox',名称:'title',标签:'title'},
{类型:'textbox',名称:'link',标签:'link'},
{类型:'listbox',名称:'colorBtn',标签:'Button Color',值:
[
{值:“008000”,文本:“绿色”},
{值:“0000FF”,文本:“蓝色”},
{值:“000000”,文本:“黑色”},
{值:“993300”,文本:“焦橙色”},
{值:“333300”,文本:“深橄榄”},
{值:“003300”,文本:“深绿色”},
{值:“003366”,文本:“深蓝色”},
{值:“000080”,文本:“海军蓝”},
{值:“333399”,文本:“靛蓝”},
{值:“333333”,文本:“非常深灰色”},
{值:“800000”,文本:“栗色”},
{值:“FF6600”,文本:“橙色”},
{值:“808000”,文本:“Olive”},
{值:“008080”,文本:“Teal”},
{值:“666699”,文本:“灰蓝色”},
{值:“808080”,文本:“灰色”},
{值:“FF0000”,文本:“红色”},
{值:“FF9900”,文本:“琥珀色”},
{值:“99CC00”,文本:“黄绿色”},
{值:“339966”,文本:“海绿色”},
{值:“33CCCC”,文本:“绿松石”},
{值:“3366FF”,文本:“皇家蓝”},
{值:“800080”,文本:“紫色”},
{值:“999999”,文本:“中灰色”},
{值:“FF00FF”,文本:“洋红”},
{值:“FFCC00”,文本:“Gold”},
{值:“FFFF00”,文本:“黄色”},
{value:“00FF00”,文本:“Lime”},
{value:“00FFFF”,文本:“Aqua”},
{值:“00CCFF”,文本:“天蓝色”},
{值:“993366”,文本:“红紫色”},
{值:“FFFFFF”,文本:“白色”},
{值:“FF99CC”,文本:“粉色”},
{值:“FFCC99”,文本:“Peach”},
{值:“FFFF99”,文本:“浅黄色”},
{值:“CCFFCC”,文本:“淡绿色”},
{值:“CCFFFF”,文本:“淡青色”},
{值:“99CCFF”,文本:“淡天蓝”},
{值:“CC99FF”,文本:“梅花”}
]
},
{类型:'listbox',名称:'colorText',标签:'Text Color',值:
[
{值:“FFFFFF”,文本:“白色”},
{值:“000000”,文本:“黑色”},
{值:“993300”,文本:“焦橙色”},
{值:“333300”,文本:“深橄榄”},
{值:“003300”,文本:“深绿色”},
{值:“003366”,文本:“深蓝色”},
{值:“000080”,文本:“海军蓝”},
{值:“333399”,文本:“靛蓝”},
{值:“333333”,文本:“非常深灰色”},
{值:“800000”,文本:“栗色”},
{值:“FF6600”,文本:“橙色”},
{值:“808000”,文本:“Olive”},
{值:“008000”,文本:“绿色”},
{值:“008080”,文本:“Teal”},
{值:“0000FF”,文本:“蓝色”},
{值:“666699”,文本:“灰蓝色”},
{值:“808080”,文本:“灰色”},
{值:“FF0000”,文本:“红色”},
{值:“FF9900”,文本:“琥珀色”},
{值:“99CC00”,文本:“黄绿色”},
{值:“339966”,文本:“海绿色”},
{值:“33CCCC”,文本:“绿松石”},
{值:“3366FF”,文本:“皇家蓝”},
{值:“800080”,文本:“紫色”},
{值:“999999”,文本:“中灰色”},
{值:“FF00FF”,文本:“洋红”},
{值:“FFCC00”,文本:“Gold”},
{值:“FFFF00”,文本:“黄色”},
{value:“00FF00”,文本:“Lime”},
{value:“00FFFF”,文本:“Aqua”},
{值:“00CCFF”,文本:“天蓝色”},
{值:“993366”,文本:“红紫色”},
{值:“FF99CC”,文本:“粉色”},
{值:“FFCC99”,文本:“Peach”},
{值:“FFFF99”,文本:“浅黄色”},
{值:“CCFFCC”,文本:“淡绿色”},
{值:“CCFFFF”,te
tinymce.PluginManager.add('buttonlink', function(editor, url) {
// Add a button that opens a window
var params = [];
editor.addButton('buttonlink', {
text: 'Insert Button',
tooltip: "Insert/edit Button link",
icon: false,
onclick: function(e) {
// Open window
var btn = this;
var text = "";
var link = "";
var backgroundTxt = "0000FF";
var colorTxt = "FFFFFF";
if (typeof params['text'] !== 'undefined') {
text = params['text'];
}
if (typeof params['link'] !== 'undefined') {
link = params['link'];
}
if (typeof params['backgroundTxt'] !== 'undefined') {
backgroundTxt = params['backgroundTxt'];
}
if (typeof params['colorTxt'] !== 'undefined') {
colorTxt = params['colorTxt'];
}
editor.windowManager.open({
title: 'Button',
body: [
{type: 'textbox', name: 'title', label: 'Title', value: text},
{type: 'textbox', name: 'link', label: 'Link', value: link},
{type: 'listbox', name: 'colorBtn', label: 'Button Color',values:
[
{value:"0000FF", text:"Blue"},
{value:"008000", text:"Green"}
],
onPostRender: function() {
this.value(backgroundTxt);
}
},
{type: 'listbox', name: 'colorText', label: 'Text Color',values:
[
{value:"FFFFFF", text:"White"},
{value:"000000", text:"Black"}
],
onPostRender: function() {
this.value(colorTxt);
}
},
],
onsubmit: function(e) {
// Insert content when the window form is submitted
if(e.data.title != null && e.data.title != "") {
var link = e.data.link;
var title = e.data.title;
var colorText = e.data.colorText;
var colorBtn = e.data.colorBtn;
if (e.data.link == null || e.data.link == "" || typeof e.data.link === 'undefined') {
link = "#";
}
tinymce.activeEditor.dom.remove(tinymce.activeEditor.dom.get("btn-link-plugin"));
editor.insertContent('<a href="' + link+ '" target="_blank" id="btn-link-plugin" class="btn" style="color: #' + colorText + '; background: #' + colorBtn + '">' + title + '</a>');
}
}
});
},
onpostrender: function (buttonApi) {
var btn = this;
var editorEventCallback = function (e) {
var IDElement = e.element.getAttribute('id');
if (btn._id == "mceu_22" && IDElement == "btn-link-plugin") {
btn.active(true);
var link = e.element.getAttribute('data-mce-href');
var style = e.element.getAttribute('style');
var text = e.element.text;
var res = style.split(";");
var colorStyle = res[0].split(":");
var backgroundStyle = res[1].split(":");
colorStyle[1] = colorStyle[1].replace(/\s+/g, '');
backgroundStyle[1] = backgroundStyle[1].replace(/\s+/g, '');
var colorTxt = colorStyle[1].substr(1);
var backgroundTxt = backgroundStyle[1].substr(1);
params['link'] = link;
params['text'] = text;
params['colorTxt'] = colorTxt;
params['backgroundTxt'] = backgroundTxt;
}
};
editor.on('NodeChange', editorEventCallback);
}
});
return {
getMetadata: function () {
return {
name: "Button Link plugin",
url: "https://capoffshore.com"
};
}
};
});