将插入按钮添加到微型MCE
我正在开发自己的插件以添加到tinyMCE v4插件的列表中，直到现在我已经达到在菜单中添加按钮并单击时打开弹出窗口的功能，之后我可以用数据填写表单它添加到tinyMCE编辑器中，但是当我想编辑这些信息时遇到了一些问题，我试图添加一些脚本，但仍然无法正常工作，
这是我的源代码：
注1：onclick可用于添加新按钮
注意2：onpostrender可用于编辑按钮
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"
};
}
};
});
这是用于创建新按钮的弹出窗口：
1 个答案:
答案 0 :(得分：0)
我用以下代码解决了问题：
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"
};
}
};
});
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？