TinyMCE ширина и высота непослушны!

Question

Согласно (противоречивой) документации TinyMCE, редактор принимает размер элемента textarea (или другого), который он заменяет.В нем также говорится, что вы можете установить размер редактора, указав { height: '123', width: '123' } в методе init.

Я пробовал ОБА и все еще получаю только один результат - редактор изменяет размер до (как он запоминаетвне меня) что это был последний раз, когда пользователь изменил его размер.

Answer 1

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

$('textarea.tinymce').tinymce({
    theme_advanced_resizing: true,
    theme_advanced_resizing_use_cookie : false,

Answer 2

Я все знаю об этом, очень раздражает .

Добавление этого к любому загруженному файлу CSS установило для меня ширину (я просто поместил его в глобальный CSS, а не в любой из файлов TinyMCE CSS, я не тестировал с высотой):

.mceEditor > table {
    width:/* my width */ !important;
}

Это повлияет на все случаи, что было хорошо в моем случае. Вы можете настроить таргетинг на саму панель инструментов с помощью .mceToolbar

Вы вроде do хотите, чтобы TinyMCE изменил размер текстовой области, поэтому он может быть достаточно широким, чтобы поместиться на всех значках панели инструментов.

Answer 3

Вот мое исправление.Это работает также для нескольких экземпляров редакторов TinyMCE (init () со свойством 'height' работает только для первого экземпляра, поэтому это обходной путь для достижения фиксированной или минимальной высоты окна редактора).

Answer 4

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

Режим

: «точный» отключит возможность изменения размера сетки путем перетаскивания

Answer 5

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

    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 = currentfr.contentDocument.body.offsetHeight + 26;
            }
            else if (currentfr.Document && currentfr.Document.body.scrollHeight) { //ie5+ syntax
                    currentfr.height = currentfr.Document.body.scrollHeight;
            }
            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-textarea_ifr {
  min-height: 500px !important;
}
.mce-tinymce {
  width: 96% !important;
  margin: 0 auto !important;
}

Answer 7

Хотя здесь есть много хороших предложений, я нашел ответ, прочитав вопрос.Нет НИКАКИХ проблем с высотой или шириной, поэтому, почему все эти обходные пути с помощью CSS или написания функций, метод в документации работает.

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

"редактор изменяет размеры до себя (насколько он помнит, это за мной), как это было в прошлый разПользователь изменил его размер. "

Саидул Ислам ответил на вопрос правильно, и чтобы сделать еще один шаг, Стюарт продолжил рассказывать, как отключить куки.Если вам нужно установить высоту и ширину, сделайте это в init () и все будет готово.Вы можете прочитать больше здесь:

https://www.tinymce.com/docs/configure/editor-appearance/#min_height

Размер области ввода как по высоте, так и по ширине работает, как показано ниже.

tinymce.init({
selector: '.profileTextArea',
plugins : 'advlist autolink link image lists charmap print preview code',
min_height: 400
});

Answer 8

Добавьте «body_id», используя tinymce.init, а затем используйте этот идентификатор в «content_css», чтобы дать редактору желаемое поведение css.Вот так:

tinymce.init({
    selector: "textarea",
    content_css: '/css/app.css',
    body_id: 'new-journal-editor'
});

А потом в app.css:

#new-journal-editor {
    height: 123px;
    width: 123px;
}

Answer 9

Я считаю, что лучший способ ограничить ширину текстовой области tinyMCE 4+ - заключить текстовую область в новый тег div или span. Затем примените ширину к этому. Таким образом, вы получаете процентную ширину вместо фиксированного px. если вы хотите отрегулировать высоту, отредактируйте значение rows = "15".

пример:

<div style="width:90%!important;" ><textarea name="content"cols="100" rows="15" class="mceEditor" id="content"><?php echo $content;?></textarea></div>

Answer 10

Я обнаружил, что текстовая область TinyMCE (называемая «.mceContentBody» в моей теме) слишком мала и неуклюжа на полях в новой области содержимого сообщений. В моей теме есть CSS-файл с именем редактора. Я изменил ширину (до 98%), так как TinyMCE использует куки-файлы для запоминания размера редактора, изменения CSS не сохранялись. После Очистка кэша моего браузера изменения ширины / поля CSS вступили в силу. В заключение. Гах.