解釋我在寫作時想要做的事情有點麻煩,所以我聽起來很蠢,很抱歉。TinyMCE 4 - 動態添加帶回調功能的按鈕
我想創建一個工作人員來實現TinyMCE到Web體驗工具包中,這將使我可以完全控制將來替換編輯器,而不用擔心打破我的視圖代碼。但是,在for循環中編輯器上有多個按鈕時,我會遇到一些麻煩。所以讓我解釋一下我的代碼。
在下面的視圖代碼中,我正在向我的工作人員發送一個aaaaCustomButton,它希望每個按鈕都有四個值。名稱,標題,文本和回調函數。因爲在這裏看到:
查看代碼
<textarea id="editbox" class="wet-boew-editor" data-wet-boew='{"iHeight": 175, "bFileMenu": false, "aaaaCustomButton": [["glossary", "Insert Glossary Term", "Insert Glossary Term","insertGlossaryWindow",], ["wrap", "test", "test","testCallback",]]}'></textarea>
這一切工作正常,這兩個按鈕從Add按鈕循環顯示,如下圖所示:
For循環
setup: function (ed) {
for(var k = 0; k < buttonNames.length; k++)
{
var holder = buttonCallBackFunctions[k];
ed.addButton(buttonNames[k], {
title: buttonTitles[k],
text: buttonTexts[k],
onclick: function() {
eval(holder);
}
});
}
}
然而,問題是onclick事件,忽略了現在的評估,因爲即使我不喜歡你唱它(即使使用window.settings,問題也會發生)。當我點擊te按鈕時,eval然後查找持有者,並運行事件。這很棒,這就是我想要的!錯誤!所以可以說我有2個按鈕,test1和test2。當onclick事件觸發test1時,持有者的最後一個值是「test2」,例如,如果我有7個按鈕,並按下按鈕test1,test7是持有者中的值。
現在爲了解決這個問題,我一直試圖在各種方式下破解它,比如獲取按鈕的名稱或ID,然後去獲取回調,但我似乎無法獲得ID或TinyMCE中單擊按鈕的名稱。
如果有人爲此提出解決方案,那就太好了。現在,我正在擱置這個問題,並且繼續處理其他更重要的事情,所以如果需要的話,請花點時間。下面列出了完整的工人代碼。
全部工人代碼
(function ($) {
"use strict";
var _pe = window.pe || {
fn: {}
}; /* local reference */
_pe.fn.editor = {
type: 'plugin',
depends: ['tinymce'],
mobile: function (elm) {
return elm;
},
_exec: function (elm) {
if (_pe.mobile) {
return;
}
var opts,
overrides,
menuBar,
toolBar;
var buttonNames = [];
var buttonTitles = [];
var buttonTexts = [];
var buttonCallBackFunctions = [];
//Defaults
opts = {
aaaaCustomButton:[], // [0] Button Name, [1] Button Title, [2] Button Text, [3] Callback Function
iHeight : 300,
iWidth : 'auto',
bEditorIsPrintOnly : false, //if this option is true, all other option become redundant
bFileMenu : true,
bEditMenu : true,
bInsertMenu : true,
bViewMenu : true,
bFormatMenu : true,
bTableMenu : true,
bToolsMenu : true,
bShowMenuBar : true, //if this is false all menu values above become redundant
bShowToolBar : true,
bShowStatusBar : true,
sLanguage : pe.language,
};
// Class-based overrides - use undefined where no override of defaults or settings.js should occur
overrides = {};
// Extend the defaults with settings passed through settings.js (wet_boew_editor), class-based overrides and the data-wet-boew attribute
$.extend(opts, (typeof wet_boew_editor !== 'undefined' ? wet_boew_editor : {}), overrides, _pe.data.getData(elm, 'wet-boew'));
//
menuBar = opts.bFileMenu ? "file " : "";
menuBar += opts.bEditMenu ? "edit " : "";
menuBar += opts.bInsertMenu ? "insert " : "";
menuBar += opts.bViewMenu ? "view " : "";
menuBar += opts.bFormatMenu ? "format " : "";
menuBar += opts.bTableMenu ? "table " : "";
menuBar += opts.bToolsMenu ? "tools " : "";
//
if(opts.aaaaCustomButton.length > 0)
{
toolBar = "";
for(var i = 0; i < opts.aaaaCustomButton.length; i++)
{
buttonNames[i] = opts.aaaaCustomButton[i][0];
buttonTitles[i] = opts.aaaaCustomButton[i][1];
buttonTexts[i] = opts.aaaaCustomButton[i][2];
buttonCallBackFunctions[i] = opts.aaaaCustomButton[i][3] + "(ed)";
toolBar += opts.aaaaCustomButton[i][0] + " ";
}
}
//Initializing editor
if(!opts.bEditorIsPrintOnly)
{
tinymce.init({
mode: "none",
theme: "modern",
entity_encoding : "raw",
plugins: "pagebreak,textcolor,table,hr,link,preview,searchreplace,print,paste,visualchars,nonbreaking,template,wordcount,code,contextmenu",
menubar: opts.bShowMenuBar ? menuBar.trim() : false,
statusbar: opts.bShowStatusBar,
toolbar: opts.bShowToolBar ? toolBar + '" | undo redo | forecolor backcolor | bold italic underline strikethrough | outdent alignleft aligncenter alignright alignjustify indent | bullist numlist hr |",' : false,
contextmenu: 'undo redo | cut copy paste |',
height: opts.iHeight,
width: opts.iWidth,
language : opts.sLanguage,
setup: function (ed) {
for(var k = 0; k < buttonNames.length; k++)
{
var holder = buttonCallBackFunctions[k];
ed.addButton(buttonNames[k], {
title: buttonTitles[k],
text: buttonTexts[k],
onclick: function() {
eval(holder);
}
});
}
}
});
}
else //A non editable for printing
{
tinymce.init({
mode: "none",
theme: "modern",
entity_encoding : "raw",
plugins: "print,wordcount,noneditable,autoresize",
menubar: false,
toolbar: "print",
contextmenu: false,
statusbar: false,
language : opts.sLanguage,
setup: function (ed) {
ed.on('PreInit', function (event) {
var ed = event.target, dom = ed.dom;
dom.setAttrib(ed.getBody(), 'contenteditable', 'false');
});
}
});
}
tinymce.execCommand("mceAddEditor", true, elm.attr('id'));
} // end of exec
};
window.pe = _pe;
return _pe;
} (jQuery));