поместите панель инструментов tinymce на внешний div

Как я могу поместить панель инструментов tinymce на внешний div? Я пробую это успешно:

Расположение панели инструментов TinyMCE

Он помещает панель инструментов на внешний, но не загружает тему css для отображения панели инструментов, потому что css загружается в iframe, поэтому панель инструментов не отображается.


html jquery css tinymce html-editor
person paganotti    schedule 23.11.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Это было проблемой для меня несколько месяцев назад. Все, что вам нужно сделать, это переместить внешнюю панель инструментов в нужное место. Я написал функцию в одном из своих плагинов. На моей странице я создал div с классом «externalToolbarWrapper», в который я вставляю панель инструментов. Вот эта функция. Возможно, вам придется немного изменить его, но думаю, что это поможет вам.

    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 : function(ed) {
      ed.onInit.add(function(ed) {
          // place your code here
      });
   },
person Thariama    schedule 23.11.2012
comment
Хорошо, я уже создал плагин и поместил внешнюю панель инструментов. Моя проблема в том, что панель инструментов не отображается, потому что все css панели инструментов загружаются в iframe, а не в основной документ. Как я могу загрузить необходимый файл css в основной документ для стилизации панели инструментов? - person paganotti; 23.11.2012
comment
взгляните на настройку editor_css - там должны быть размещены css для элементов панели инструментов tinymce - person Thariama; 23.11.2012

arrow_upward
0
arrow_downward

Ребята, если вы хотите попробовать это, это еще проще и короче

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

"Мунсиф Мулла"

person mCube    schedule 26.12.2012