将tinymce工具栏放在外部div上答案

【问题标题】：put tinymce toolbar on external div将tinymce工具栏放在外部div上
【发布时间】：2012-12-26 19:39:22
【问题描述】：

如何将 tinymce 工具栏放在外部 div 上？我试试这个成功：

它把工具栏放在外部，但它没有加载用于显示工具栏的 css 主题，因为 css 是在 iframe 中加载的，所以工具栏不显示。

【问题讨论】：

【解决方案1】：

几个月前这对我来说一直是个问题。您需要做的就是将外部工具栏移动到您想要的位置。我在我的一个插件中编写了一个函数。在我的页面上，我创建了一个带有“externalToolbarWrapper”类的 div，我在其中插入了工具栏。这是那个功能。您可能需要稍微调整一下，但认为它会对您有所帮助。

    showExternalToolbar: function(){

        if (this.editor.getParam('theme_advanced_toolbar_location') != 'external') return;

        if (!document.getElementById('externalToolbarWrapper')) $(document.body).prepend('<div id="externalToolbarWrapper"></div>');

        var $toolbar = $('#'+this.editor.id + '_external');

        // inserts the external toolbar in the external wrapper
        $('#externalToolbarWrapper').append('<div id="replacementDiv"></div>');

        $('#replacementDiv').replaceWith($toolbar.show());
        $toolbar.css('top','0px');
        $toolbar.css('display','block');

        $('#' + this.editor.id + '_external_close').remove();
        $('#' + this.editor.id +'_toolbargroup').css('width', innerWidth || 800); // innerwidth is an integer value
    },

如果你不想将上面的代码放在一个自己的插件中，你应该调用上面的代码（在这里使用setup configuration parameter）

   setup : function(ed) {
      ed.onInit.add(function(ed) {
          // place your code here
      });
   },

【讨论】：

好的，我已经创建了一个插件并将工具栏放在外部。我的问题是工具栏没有显示，因为工具栏的所有 css 都加载到 iframe 而不是主文档中。如何在主文档中加载必要的 css 文件以设置样式工具栏？
看看 editor_css 设置 - tinymce 工具栏元素的 css 应该放置在那里

【解决方案2】：

如果你想试试这个，它更容易和更短

setup:function(ed){
    ed.onInit.add(function(ed, evt){
        $toolbar = $('#'+ed.id+'_external');
        $toolbar.hide().appendTo('yourExternalDiv');
    });
}

“穆西夫·穆拉”

【讨论】：