將tinymce工具欄放在外部div上

如何將tinymce工具欄放在外部div上？我試試這個全成：將tinymce工具欄放在外部div上

它把工具欄上的外部，但它不會加載CSS主題顯示的工具欄，因爲CSS是在iframe中加載，所以工具欄不顯示。

2012-11-23 paganotti

幾個月前，這對我來說是一個問題。您只需將外部工具欄移動到您想要的位置即可。我在我的一個插件中寫了一個函數。在我的頁面上，我創建了一個帶有「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 
    },

你應該叫上面的代碼中的OnInit如果你不想將其放在自己的插件內（這裏使用的setup configuration parameter）

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

來源

2012-11-23 14:54:43 Thariama

好，我已經創建一個插件，並把工具欄外。我的問題是，工具欄不顯示，因爲工具欄的所有CSS都加載在iframe中，而不是在主文檔中。如何在樣式工具欄的主文檔中加載必要的CSS文件？ – paganotti

在editor_css設置中已經隱藏起來--cim for tinymce工具欄元素應放置在那裏 – Thariama

傢伙當U想試試這個，它更容易和短

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

「Munsif穆拉」

來源

2012-12-26 11:39:22 mCube

將tinymce工具欄放在外部div上

回答

相關問題