Как сделать TinyMCE отзывчивым

Ответ 1

Редактор TinyMCE может реагировать на запросы css media. Просто добавьте правила css, которые задают свойство width для table.mceLayout и текстовых областей tinyMCE. Вам нужно будет обеспечить соблюдение этих правил css с помощью !important, потому что в противном случае они были бы перезаписаны.

Например, я использую css, подобный этому:

/* on mobile browsers, I set a width of 100% */
table.mceLayout, textarea.tinyMCE {
    width: 100% !important;
}

/* on large screens, I use a different layout, so 600px are sufficient */
@media only screen and (min-width: 600px) {
    table.mceLayout, textarea.richEditor {
       width: 600px !important;
    }
}

См. этот jsfiddle: http://jsfiddle.net/johannesjh/384uf/

Примечание. Возможно, вы захотите использовать различные медиа-запросы или классы css, чтобы использовать адаптивную сетку "Foundation Framework".

Ответ 2

Есть способ заставить панели инструментов обернуться на более мелкие экраны.

/* make the toolbar wrap */
.mceToolbar td {
    display:table-row;
    float: left;
}
.mceToolbar td:nth-of-type(11){
    clear: left;
}

Я сделал вилку скрипки, которую опубликовал Йоханнес, включая следующие правила:

http://jsfiddle.net/joshfeck/gMVSE/

Ответ 3

Я использую версию 4 TinyMCE, есть плагин с именем autoresize. Это делает редактор отзывчивым.

Ответ 4

Вот что я использую на сайте, чтобы изменить размер редактора, и панели инструментов перемещаются с размером страницы:

.mceEditor table {
max-width:none; /* Bug in computation of fullscreen */
}

.mceEditor table.mceLayout {
width:100% !important;
height:auto !important;
} 

table.mceToolbar { float:left; }
body .mceToolbar div {
white-space:normal;
}

Используя небольшую панель инструментов, они правильно выкладываются при изменении ширины редактора. "theme_advanced_resize" должен быть установлен на "false". Кроме того, для работы с полноэкранным режимом требуется больше работы.