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

Question

Я использую редактор tinymce на своей странице. Я хочу динамически изменять высоту редактора. Я создал функцию:

function setComposeTextareaHeight()
{
    $("#compose").height(200);
}

но это не работает. Моя текстовая область

<textarea id="compose" cols="80" name="composeMailContent" style="width: 100%; height: 100%">

Я перепробовал все виды методов для изменения высоты, но не смог прийти к разрешению. Есть что-то, чего мне не хватает?

Answer 1

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

   editorinstance.theme.resizeTo (width, height);

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

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

Answer 2

Попробуйте:

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');

Answer 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();
}

Answer 4

Уже немного поздно, но для Googler, как я, проверьте плагин autoizeize

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

Опции

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

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

Answer 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(';'));
        }
    },

Answer 6

Я использую 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)"
});

Answer 7

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

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

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

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

Answer 8

 $(window).load(function () {

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

});