javascript - TinyMCE 工具栏位置

Question

工具栏如何显示在定义的位置(具有特定 id 的 div)？

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

文档说 theme_advanced_toolbar_location:

.. adds the toolbar to a DIV element and sets the class of this DIV to "mceExternalToolbar". ... but not if you can change the div. is there maybe a possibilty to change this code?

BR,斯特凡

Answer 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
    },

更新:

你应该调用它 onInit(在这里使用 setup configuration parameter)

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