it-swarm.com.ru

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

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

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

24
Jimbo

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

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

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

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

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

18
Wesley Murch

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

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

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

.mceEditor td.mceIframeContainer iframe {
    min-height: 350px !important;
}
.mceEditor table {
    height: auto !important;
}
3
Kamil Bednarz

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

    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(';'));
        }
    },
1
Thariama
tinyMCE.init({
        mode : "exact",
         .....

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

1
Gihan Lasita

Я обнаружил, что текстовая область TinyMCE (называемая «.mceContentBody» в моей теме) слишком мала и неуклюжа на полях в новой области содержимого сообщений. В моей теме есть CSS-файл, который называется редактором. Я изменил ширину (до 98%), так как TinyMCE использует куки-файлы для запоминания размера редактора, изменения CSS не сохранялись. После ОЧИСТКА КЕША МОЕГО БРАУЗЕРА вступили в силу изменения ширины/поля CSS. В заключение. Гах.

0
Commandrea

Добавьте 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;
}
0
gpkamp

Хотя здесь есть много хороших предложений, я нашел ответ, прочитав вопрос. Нет НИКАКИХ проблем с высотой или шириной, поэтому, почему все эти обходные пути с 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
});
0
user1946891

Я заметил, что содержащая таблица задает ширину, а также набор значков - td, поэтому есть минимальная ширина, до которой они свернутся, поэтому, если у вас много значков в одной строке - это может привести к путанице по всей ширине.

В некотором роде связанный SO мой вопрос, в конечном итоге оказался весьма связанным с вашей проблемой: Способен ли последовательно перемещать элементы td?

0
danjah

я устанавливаю ширину и высоту в области редактора, как это

<style>
#content{width: 620px; height: 500px;} 
</style>

<textarea name="content" id="content" cols="50" rows="15"></textarea>
0
Gihan Lasita

Я сталкиваюсь с той же проблемой, но в итоге я делаю это

#tinymce-textarea_ifr {
  min-height: 500px !important;
}
.mce-tinymce {
  width: 96% !important;
  margin: 0 auto !important;
}
0
Abdalla Arbab