Как автоматически изменить размер tinyMCE?
-
22-09-2019 - |
Вопрос
У меня есть TinyMCE, установленный поверх TextArea, и я хочу, чтобы эта область редактора всегда занимала все пространство его родительского div.
У меня есть функция JS, которая получает текущее пространство и устанавливает для него textarea.style.height, но когда я включаю TinyMCE, кажется, что он перестает работать.
Кроме того, текстовая область имеет ширину:100%;его размер не изменяется при рендеринге HTML, когда он также использует TinyMCE.
Есть идеи?
Решение
В настоящее время вам следует использовать плагин автоматического изменения размера который поставляется с tinyMCE.Вам придется вызвать tinyMCE следующим образом (версия jQuery):
$('.tinymce').tinymce({
theme : 'advanced',
plugins : 'autoresize',
width: '100%',
height: 400,
autoresize_min_height: 400,
autoresize_max_height: 800,
});
Я убедился в том, что может быть полезно вручную вызвать изменение размера в init_instance_callback
чтобы обеспечить правильную высоту при инициализации.Добавьте этот параметр в переданные параметры, если вам это нужно:
init_instance_callback: function (inst) { inst.execCommand('mceAutoResize'); }
Другие советы
Дело в том, что TinyMCE генерирует iframe вместо текстовой области с этим идентификатором:originalID+"_ifr" и таблица originalID+"_tbl" для хранения элементов управления и области редактора.
Чтобы сделать ширину жидкости:
document.getElementById(id+'_tbl').style.width='100%'
Чтобы сделать высоту жидкости:
Меняйтесь динамично document.getElementById(id+'_ifr').style.height
на нужную вам высоту через JS.
Это скрипт, который я использую для этого:
function toScreenHeight(id, minus) {
var height;
if (typeof(window.innerHeight) == "number") //non-IE
height = window.innerHeight;
else if (document.documentElement && document.documentElement.clientHeight) //IE 6+ strict mode
height = document.documentElement.clientHeight;
else if (document.body && document.body.clientHeight) //IE 4 compatible / IE quirks mode
height = document.body.clientHeight;
document.getElementById(id).style.height = (height - minus) + "px";
}
Вы можете использовать код и вызовы функций внутри onload
и onresize
body
события.
в Tinymce 3.4.6, набор
width:'100%'
в опции init решит проблему.
Если вы динамически создаете крошечный MCE через JS, вы можете столкнуться с проблемами синхронизации, поскольку редактор MCE еще недоступен для настройки стиля.Чтобы бороться с этим, вы можете использовать старый школьный тайм-аут.
В этом примере я использую пространство имен «j» для JQuery.Если ваш редактор находится в плавном div, который меняет размер, вы можете включить это в $(window).resize(function() { });слушатель.
setTimeout(function(){
$j('.mceEditor').css('width','100%').css('minHeight','240px');
$j('.mceLayout').css('width','100%').css('minHeight','240px');
$j('.mceIframeContainer').css('width','100%').css('minHeight','240px');
$j('#'+[INSERT TEXTAREA ID HERE]+'_ifr').css('width','100%').css('minHeight','240px');
},500)
Ничто из вышеперечисленного не работало у меня в 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 и возможностью использовать макет flexbox в браузере я сделал следующее, чтобы получить возможность редактирования полной ширины и высоты родительского элемента div.
Поместить CSS в файл будет легко, если вы предпочитаете добавить его к существующим стилям.
var css = '.tinycme-full .mce-edit-area {display:flex;flex-flow:column;} .tinycme-full .mce-edit-area iframe {flex:1 1 auto;} .tinycme-full {height:100%;} .tinycme-full .mce-tinymce.mce-container { width:100%;height:100%;border:0; } .tinycme-full .mce-panel{border:0} .tinycme-full .mce-container-body.mce-stack-layout {display: flex; flex-flow: column;height: 100%;} .tinycme-full .mce-stack-layout-item{ flex: 0 0 auto;} .tinycme-full .mce-edit-area{flex:1 1 auto;} ',
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
style.styleSheet["cssText"] = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
Идея состоит в том, что все необходимые элементы div занимают столько места в столбце, сколько необходимо, чтобы заполнить родительский элемент на 100%, и это делается путем размещения элемента div вокруг вашей текстовой области: <div class="tinycme-full"> <textarea ... /></div>
Никакого jquery или других зависимостей не требуется, и теперь он заполняет родительский элемент на 100%.
У меня была та же проблема, после прочтения этой темы я получил этот код
init_instance_callback: function (inst) {
setTimeout(function () {
document.getElementById(inst.id + '_ifr').style.height= (document.getElementById("theContainerDiv").offsetHeight-85) + 'px';
},1000);
},
Я изменяю размер элемента «_ifm» вместо «_tbl», поскольку изменение размера «_tbl» не привело к изменению размера области редактирования.Затем я оставляю немного места для панели инструментов и строки состояния, делая «_ifr» на 85 пикселей короче, чем контейнерный div.
Мне пришлось использовать setTimeout, чтобы заставить его работать, возможно, потому, что у меня есть анимация, отображающая элемент контейнера.
Для этого я использую чистое решение CSS (tinyMCE 4.0.20).
Установите высоту iframe на 100%:
tinymce.init ({высота:'100%'})
Добавьте стили в контейнер iframe с автоматическим изменением размера:
.mce-tinymce { высота:авто;ширина:100%;позиция:абсолютный;левый:0;вершина:0;нижний:0;}
.bq-editor .mce-container-body { высота:100%;}
.bq-editor .mce-edit-area { позиция:абсолютный;вершина:57 пикселей;нижний:0;ширина:100%;высота:авто;}
Примечание: У меня есть одна строка панели инструментов и верхняя часть:57 пикселей;в .bq-editor .mce-edit-area — это заполнение панели инструментов.
SyCoDeR прав, но я пошел немного другим путем, хотя, вероятно, с теми же результатами.
/*Container, container body, iframe*/
.mce-tinymce, .mce-container-body, #code_ifr {
min-height: 100% !important;
}
/*Container body*/
.mce-container-body {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
/*Editing area*/
.mce-container-body .mce-edit-area {
position: absolute;
top: 69px;
bottom: 37px;
left: 0;
right: 0;
}
/*Footer*/
.mce-tinymce .mce-statusbar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
Пересмотрено, поскольку TinyMCE меняет идентификаторы при добавлении или удалении меню/панели инструментов.Это работает независимо от того, что вы с этим делаете.
Оболочка iframe (его идентификатор заканчивается _ifr) является первым родительским элементом диапазона, для которого он имеет роль приложения.Таким образом, чтобы получить обертку:
$('span[role=application]').parents(':eq(0)')
Итак, чтобы изменить размер высоты:
$('[id$=_ifr]').css('height',$('span[role=application]').parents(':eq(0)').css('height'))
Чтобы изменить размер ширины
$('[id$=_ifr]').css('width',$('span[role=application]').parents(':eq(0)').css('width'))
Ни одно из этих решений не помогло мне на 100%.Мне нужно было регулировать высоту при инициализации и во время редактирования.Я захватил высоту элемента HTML в iFrame, а затем применил высоту к iFrame с дополнительными 100 пикселями.
Вот мое решение:(добавлена максимальная ширина img для адаптивных изображений)
при инициализации
setup: function(editor) {
editor.on('init', function (e) {
$("#editor_textarea_ifr").contents().find('img').css("max-width","100%");
iframeHeight = $("#editor_textarea_ifr").contents().find("html").height();
$("#editor_textarea_ifr").css("height",iframeHeight + 100);
});
},
при смене узла (правках)
init_instance_callback: function (editor) {
editor.on('NodeChange', function (e) {
$("#editor_textarea_ifr").contents().find('img').css("max-width","100%");
iframeHeight = $("#editor_textarea_ifr").contents().find("html").height();
$("#editor_textarea_ifr").css("height",iframeHeight + 100);
});
}