it-roy-ru.com

Как автоматически изменить размер tinyMCE?

У меня есть TinyMCE, который установлен поверх TextArea, и я хочу, чтобы эта область редактора постоянно занимала все пространство своего родительского div.

У меня есть функция JS, которая получает текущее пространство и устанавливает для него textarea.style.height, но когда я включаю TinyMCE, кажется, он перестает работать.

Также текстовая область имеет ширину: 100%; он не изменяет размер при рендеринге HTML, когда он также использует TinyMCE.

Есть идеи?

31
igorsantos07

В настоящее время вы должны использовать плагин autoresize , который поставляется с 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'); }
49
bfncs

Дело в том, что TinyMCE генерирует iframe вместо текстовой области с таким ID: 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 и onresizebody.

14
igorsantos07

в tinymce 3.4.6, набор 

width:'100%'

в варианте init решит проблему.

9
ZHAO Xudong

Ничто из вышеперечисленного не работало для меня в 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();
}
3
Kyle Falconer

Если вы выполняете крошечный 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) 
3
Noel Baron

С версией 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% .enter image description here

2
Poul K. Sørensen

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 меняет идентификаторы с добавлением или удалением меню/панели инструментов. Это работает независимо от того, что вы делаете с этим.

1
liquibyte

У меня была такая же проблема, после прочтения этой темы я закончил с этим кодом

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 пикселей короче, чем контейнерный блок. 

Мне пришлось использовать setTimeout, чтобы заставить его работать, возможно, потому что у меня есть анимация, которая отображает элемент контейнера.

1
emmanuel2004

Я использую чистое решение CSS для достижения этой цели (tinyMCE 4.0.20).

  1. Установите высоту iframe на 100%:

    tinymce.init ({ height: '100%' })

  2. Добавьте стили в контейнер iframe с автоматическим изменением размера:

    .mce-tinymce {height: auto; ширина: 100%; положение: абсолютное; слева: 0; верх: 0; низ: 0; }

    .bq-editor .mce-container-body {height: 100%; }

    .bq-редактор .mce-edit-area {position: absolute; верх: 57px; низ: 0; ширина: 100%; высота: авто; }

Примечание: У меня есть одна строка панели инструментов, а верх: 57px; в .bq-редакторе .mce-edit-area - это заполнение панели инструментов.

0
SyCoDeR

Ни одно из этих решений не сработало для меня на 100%. Мне нужно было регулировать высоту при инициализации и во время редактирования. Я взял высоту элемента HTML в iFrame, а затем применил высоту к iFrame с дополнительными 100px.

Вот мое решение: (добавлено img max-width для адаптивных изображений)

при инициализации

   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);   
    });
}   
0
DobotJr

Оболочка iframe (его идентификатор заканчивается _ifr) является первым родителем span, в котором у него есть роль приложения. Таким образом, чтобы получить обертку: 

$('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'))
0
Abdennour TOUMI