2014-07-23 53 views
0

解釋我在寫作時想要做的事情有點麻煩,所以我聽起來很蠢,很抱歉。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)); 

回答

0

,但我似乎無法獲得點擊的按鈕的編號或名稱,在 TinyMCE的。

嗯,我不能爲您提供按鈕ID,但這可以給你點擊按鈕的名稱。

setup : function(ed) { 
     ed.on('ExecCommand',function(e){ 
      alert(e.command, e.ui, e.value);   
     }) 
    } 

檢查此鏈接 -

http://www.tinymce.com/wiki.php/api4:class.tinymce.CommandEvent

您還可以檢查我上次張貼在這裏回答 -

tinymce - adding a custom code/change value of a html element, when any of buttons is clicked

或者檢查演示 - WORKING DEMO