addButton第二次不能正常工作

Question

以下是這種情況：我們正在開發類似CMS的工具，以管理各種電子郵件活動的副本。有一種表單允許用戶選擇一個模板來工作，其中還包括一個tinymce編輯器（v4.1.6）。
爲了支持通配符，正在使用按鈕來獲取值以在tinymce中填充下拉菜單。這一切在第一次都很好，但是用戶選擇一個新模板的時候（它會稍微改變窗體的形狀，一個空的按鈕正在呈現在菜單的位置）

我已經瀏覽了代碼，看每一步的變量值，只是發現每個變量都擁有我期望它們保持的值，並且每一個函數都會在需要被調用的時間和地點被調用，我不能，因爲我的生活，爲什麼我沒有得到第二次圍繞tinymce.init()調用相同的結果。無論如何，這是代碼，它是一個相當大的模塊的一部分，但tinyInit函數是相當獨立的：

var tinyInit = (function() 
{ 
    var i,menu =[], 
     cbContainer = { 
      editor: false, 
      cb: function() { 
       cbContainer.editor.execCommand(
        'mceInsertContent', 
        false, 
        this._value 
       ); 
      } 
     }; 
    return function (btns) 
    { 
     var config = { 
      selector: 'textarea', 
      setup: function (editor) { 
       cbContainer.editor = editor; 
       editor.addButton('button', { 
        type: 'menubutton', 
        text: 'Placeholders', 
        name: 'placeholders', 
        icon: false, 
        menu: menu 
       }); 
      }, 
      toolbar: " button " 
     }; 
     for (i=0;i<tinymce.editors.length;++i) { 
      //or tinymce.editors[i].remove(); 
      tinymce.execCommand('mceRemoveEditor', false, tinymce.editors[i].remove()); 
     } 
     cbContainer.editor = false; 
     btns = btns || $('.placeholders'); 
     for (i = 0, menu.splice(0, menu.length); i < btns.length; ++i) { 
      menu.push(
       { 
        text: btns[i].textContent, 
        value: btns[i].value, 
        onclick: cbContainer.cb 
       } 
      ); 
     } 
     (btns instanceof $ ? btns : $(btns)).remove(); 
     if (SomeGlobalModule.viewSource) { 
      config.plugins = 'code'; 
     } 
     tinymce.init(config); 
    }; 
}()); 

最初，形式可能是這個樣子：

<textarea>Foobar</textarea> 
<button class="placeholders" value="%NAME%">Name</button> 
<button class="placeholders" value="%DATE%">Date</button> 

哪些工作出色：textarea的成爲TinyMCE的編輯器，而且會有一個菜單，允許用戶選擇選擇的佔位符，將它們插入到內容整齊。然而，當選擇一個新的模板，整個形式被重新加載（AJAX），我調用此函數從成功回調：

$.ajax({ 
    url: SomeGlobalModule.url, 
    type: 'post', 
    success: function(r) 
    { 
     //frm variable is updated elsewhere, but it's updated correct & reliably 
     frm.replaceWith($(r));//replace form, frm references current element 
     reinitMenus(); 
     tinyInit($('.placeholders'));//reinit tinymce 
    } 
}); 

同樣，所有的功能（包括setup回調）是被調用，並且變量menu始終具有期望值。那麼，爲什麼不是下拉式填充？

Answer 1

更新：
仍然下面列出的解決方案是，我得到這個佔位符菜單業務工作的唯一途徑。與此同時，我已經找到了寫TinyMCE插件的時間，我已經把它放到了on github。
因爲我發現了人們試圖做同樣事情的證據，並且每次答案都會寫出自己的自定義插件，我決定創建一個請求TinyMCE維護人員的請求自己提供這個插件。如果您偶然發現此問題/答案，並希望看到此插件包含在TinyMCE make some noise中。

我已經找到了一些時間來再次看到問題。我決定創建一個實際的插件，而不是使用setup回調添加按鈕/菜單。爲了讓我的生活更輕鬆，我決定將該插件添加到我的tinyInit函數中的管理器中，構建與之前相同的menu陣列。現在，該代碼如下所示：

var tinyInit = (function() 
{ 
    var i,menu =[], 
     cbContainer = { 
      editor: false, 
      cb: function() { 
       tinymce.activeEditor.execCommand(
        'mceInsertContent', 
        false, 
        this._value 
       ); 
      } 
     }; 
    return function (btns) 
    { 
     var config = { 
      selector: 'textarea', 
      plugins: ['placeholders'], 
      toolbar1: "placeholders" 
     }; 
     for (i=0;i<tinymce.editors.length;++i) { 
      //or tinymce.editors[i].remove(); 
      tinymce.execCommand('mceRemoveEditor', false, tinymce.editors[i].remove()); 
     } 
     cbContainer.editor = false; 
     btns = btns || $('.placeholders'); 
     for (i = 0, menu.splice(0, menu.length); i < btns.length; ++i) { 
      menu.push(
       { 
        text: btns[i].textContent, 
        value: btns[i].value, 
        onclick: cbContainer.cb 
       } 
      ); 
     } 
     tinymce.PluginManager.add('placeholders', function(editor) { 
      editor.addButton('placeholders', { 
       text: 'Placeholders', 
       type: 'menubutton', 
       name: 'placeholders', 
       icon: false, 
       menu: menu 
      }); 
     }); 
     (btns instanceof $ ? btns : $(btns)).remove(); 
     if (SomeGlobalModule.viewSource) { 
      config.plugins = 'code'; 
     } 
     tinymce.init(config); 
    }; 
}()); 

我可能會尋找到一個方法來創建這個作爲一個獨立的插件，並提供了多種方法來設置在運行菜單中的內容（ajax請求，將菜單數組傳遞給init調用等）。同時，這種方法似乎工作得很好。我會把它留在這裏，以防其他人遇到同樣的問題。