Динамически изменяйте высоту редактора tinyMce

Ответ 1

Вы можете изменить размер tinymce с помощью метода resizeTo theme:

   editorinstance.theme.resizeTo (width, height);

Ширина и высота задают новый размер области редактирования - я не нашел способ вывести лишний размер экземпляра редактора, поэтому вы можете сделать что-то вроде этого:

   editorinstance.theme.resizeTo (new_width - 2, new_height - 32);

Ответ 2

Try:

tinyMCE.init({
       mode : "exact",
       elements : "elm1",
     ....

Чтобы динамически изменять размер в вашем javascript-коде:

var resizeHeight = 350;
var resizeWidth = 450;
    tinyMCE.DOM.setStyle(tinyMCE.DOM.get("elm1" + '_ifr'), 'height', resizeHeight + 'px');
    tinyMCE.DOM.setStyle(tinyMCE.DOM.get("elm1" + '_ifr'), 'width', resizeWidth + 'px');

Ответ 3

Ниже представлен этот другой ответ SO, который я разместил:

Ничего из вышеперечисленного не работало для меня в TinyMCE v4, поэтому моим решением было рассчитать высоту на основе панелей инструментов/строки меню/строки состояния, а затем установить высоту редактора с учетом этих высот.

function resizeEditor(myHeight) {
    window.console.log('resizeEditor');
    myEditor = getEditor();
    if (myEditor) {
        try {
            if (!myHeight) {            
                var targetHeight = window.innerHeight; // Change this to the height of your wrapper element
                var mce_bars_height = 0;
                $('.mce-toolbar, .mce-statusbar, .mce-menubar').each(function(){
                    mce_bars_height += $(this).height();
                });
                window.console.log('mce bars height total: '+mce_bars_height);                          
                myHeight = targetHeight - mce_bars_height - 8;  // the extra 8 is for margin added between the toolbars
            }
            window.console.log('resizeEditor: ', myHeight);
            myEditor.theme.resizeTo('100%', myHeight);  // sets the dimensions of the editable area
        }
        catch (err) {
        }
    }
}

В моем случае я хотел, чтобы окно редактора соответствовало ширине и высоте фактического window, так как редактор появлялся всплывающим. Чтобы обнаружить изменения и изменить размер, я установил это для обратного вызова:

window.onresize = function() {
    resizeEditor();
}

Ответ 4

Это немного поздно, но для Googler, как я, проверьте плагин autoresize

tinymce.init({
    plugins: "autoresize"
});

Опции

autoresize_min_height: минимальное значение высоты редактора при его автоматическом изменении.

autoresize_max_height: максимальное значение высоты редактора при автоматическом изменении размера.

Ответ 5

Что говорит ManseUK, почти правильно. Правильное решение:

$('#compose_ifr').height(200);

или в вашем случае

$('#composeMailContent_ifr').height(200);

Обновление: возможно, это больше того, что вы ищете:

    // resizes editoriframe
    resizeIframe: function(frameid) {
        var frameid = frameid ? frameid : this.editor.id+'_ifr';
        var currentfr=document.getElementById(frameid);

        if (currentfr && !window.opera){
            currentfr.style.display="block";
            if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) { //ns6 syntax
                currentfr.height = 200 + 26;
            }
            else if (currentfr.Document && currentfr.Document.body.scrollHeight) { //ie5+ syntax
                    currentfr.height = 200;
            }
            styles = currentfr.getAttribute('style').split(';');
            for (var i=0; i<styles.length; i++) {
                if ( styles[i].search('height:') ==1 ){
                    styles.splice(i,1);
                    break;
                }
            };
            currentfr.setAttribute('style', styles.join(';'));
        }
    },

Ответ 6

В случае, если кто-то найдет это и также захочет изменить высоту плагинов редактора исходного кода.

Вам необходимо отредактировать следующий файл:

\tiny_mce\plugins\code\plugin.min.js

Посмотрите на атрибут minHeigh и настройте его на свои нужды. Высота, которую вы определяете, не является высотой всего поля, но это также не высота текстовой области. Это нечто между ними.

Ответ 7

Я использую tinymce 4.8.3.

Я отображаю редактор в модальном диалоговом окне с изменяемым размером.

Я решил это с помощью flexbox, показанного здесь в SASS/SCSS:

// TinyMCE editor is inside a container something like this
.html-container {
    height: 100%;
    overflow: hidden;
}

.mce-tinymce {
    // This prevents the bottom border being clipped
    // May work with just 100%, I may have interference with other styles
    height: calc(100% - 2px);

    & > .mce-container-body {
        height: 100%;
        display: flex;
        flex-direction: column;

        & > .mce-edit-area {
            flex: 1;

            // This somehow prevents minimum height of iframe in Chrome
            // If we resize too small the iframe stops shrinking.
            height: 1px; 
        }
    }
}

Когда редактор инициализируется, мы должны сказать ему, чтобы он поместил 100% высоту на IFRAME. В моем случае я также должен вычесть 2px, иначе правая граница обрезается:

tinymce.init({
    ...
    height: "100%",
    width: "calc(100% - 2px)"
});

Ответ 8

 $(window).load(function () {

$('#YourID_ifr').css('height', '550px');

});