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调用等）。同时，这种方法似乎工作得很好。我会把它留在这里，以防其他人遇到同样的问题。