TinyMCE工具栏位置

时间:2012-05-30 16:00:37

标签: javascript tinymce toolbar

如何在定义的位置(具有特定ID的div)上显示工具栏?

我尝试了theme_advanced_toolbar_location:“external”并设置了“mceExternalToolbar”的位置(就像这里建议的那样:TinyMCE - external toolbar position)但是不喜欢这个解决方案,因为它使用固定定位.... 有没有选项如何放置div。

文档说明了theme_advanced_toolbar_location:

  

..将工具栏添加到DIV元素并将此DIV的类设置为   “mceExternalToolbar”。 ...   但如果你能改变div则不行。是否有可能更改此代码?

BR, 斯蒂芬

1 个答案:

答案 0 :(得分:2)

几个月前,这对我来说是一个问题。您需要做的就是将外部工具栏移动到您想要的位置。我在我的一个插件中编写了一个函数。 在我的页面上,我创建了一个带有“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
      });
   },