Высота TinyMCE 4 и 100% внутри содержа элемент

Я нахожусь в процессе миграции из TinyMCE 3 в 4.

однако я застрял в том, чтобы TinyMCE заполнял свой контейнер высоты 100% (он работает с TinyMCE 3).

обратите внимание на эту скрипку:http://jsfiddle.net/MLJaN/

я использовал CSS ниже, чтобы попытаться установить iframe и всех его родителей на 100% - высоту. Я согласен, что это не выглядит идеальным, но я бы подумал, что это должно работать таким образом.

 body, html, .mce-tinymce, .mce-edit-area.mce-container, iframe, .mce-container-body.mce-stack-layout
 {
     height: 100% !important;
 }

Как вы можете смотрите в live-fiddle, это точно количество пикселей панели инструментов "слишком высокий": т. е. это 34px слишком высокий (высота панели инструментов).

это работает, но он не автоматически изменяет размер с браузером, и он использует calc (), который сейчас поддерживается только на 79%:http://jsfiddle.net/MLJaN/2/

теперь я ищу чистое решение CSS (без функции calc ()), чтобы весь редактор заполнял свой контейнер и был плавно изменяемый.

любые указатели были бы очень признательны.

10
css height tinymce tinymce-4

7 ответов

когда ты молоток, каждая проблема выглядит как гвоздь. Для этого нет необходимости в javascript или jquery, поскольку теги существуют для работы. Все, что нужно, это настроить поле на #mcu_31 для настройки высоты панели инструментов и нижнего колонтитула. Следующие наборы tinymce, чтобы быть отзывчивым в его содержащем элементе.

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

8

вместо того, чтобы делать вычисления в CSS, я переместил их в JS. это означает, что высота меню будет автоматически рассчитываться и не должна регулироваться вручную. Это также делает это решение совместимым с любым браузером даже без поддержки css calc ().

function resize() {
    setTimeout(function () {
        // Main container
        var max = $('.mce-tinymce')
              .css('border', 'none')
              .parent().outerHeight();

        // Menubar
        max += -$('.mce-menubar.mce-toolbar').outerHeight(); 

        // Toolbar
        max -= $('.mce-toolbar-grp').outerHeight(); 

        // Random fix lawl - why 1px? no one knows
        max -= 1;

        // Set the new height
        $('.mce-edit-area').height(max);
    }, 200); 
} 

$(window).on('resize', function () { resize(); });

но не верьте мне на слово.

попробуйте на jsBin:http://jsbin.com/dibug/2/edit

для хорошей справки я также создаю суть.

4

Я решил эту проблему с помощью pure в CSS С помощью flex-коробки.

<style>
  #article, .mce-tinymce,.mce-stack-layout, .mce-edit-area{
    display: flex;
    flex-direction: column;
    flex: 1;
  }
   .mce-tinymce iframe{
    flex: 1;
  }
</style>

таким образом, вам не нужно заботиться о размерах строки меню и других элементов.

JSFiddle демо: https://jsfiddle.net/hk5a53d8/

4

для тех из вас, кто не использует jQuery, вот чистый код javascript, который работает:

function doresize(){
    var ht = window.innerHeight;
    console.log("ht = " + ht);

    if (document.getElementsByClassName('mce-toolbar-grp')){
        ht += -document.getElementsByClassName('mce-toolbar-grp')[0].offsetHeight;
        ht += -document.getElementsByClassName('mce-toolbar-grp')[0].offsetTop;
        console.log("ht = " + ht);
    }
    if (document.getElementsByClassName('mce-statusbar')){
        ht += -document.getElementsByClassName('mce-statusbar')[0].offsetHeight;
        console.log("ht = " + ht);
    }

    ht += -3; // magic value that changes depending on your html and body margins

    if (document.getElementsByClassName('mce-edit-area')){
        document.getElementsByClassName('mce-edit-area')[0].style.height = ht + "px";
        console.log("ht = " + ht);
    }

}

window.onresize=doresize;
window.onload=doresize;
3

в угловом фиксируется только это,

@Component({
  selector: 'serta-tinymce',
  template: `<textarea **style="min-height:500px"** id="store-description"></textarea>`,
  styles: []
})
0

никто не исправил мою проблему так хорошо, как этот. Это комбинация пары ответов сверху.

$(window).on('resize', function () {
    setTimeout(function () {
        var max = $('.mce-tinymce').css('border', 'none').parent().height();
        max -= $('.mce-menubar.mce-toolbar').outerHeight(); 
        max -= $('.mce-toolbar-grp').outerHeight(); 
        max -= $('.mce-edit-area').outerHeight() - $('.mce-edit-area').height();
        $('.mce-edit-area').height(max);
    }, 100); 
});

и добавьте триггер изменения размера в init:

tinymce.init({
    selector: '#tinymce',
    height: "100%",
    branding: false,
    statusbar: false,
    setup: function (ed) {
        ed.on('init', function(args) {
            $(window).trigger('resize');
        });
    }
});
0

Я в порядке, используя CSS calc для работы. Это сработало для меня:

.mce-tinymce, .mce-edit-area.mce-container, .mce-container-body.mce-stack-layout
{
    height: 100% !important;
}

.mce-edit-area.mce-container {
    height: calc(100% - 88px) !important;
    overflow-y: scroll;
}

Примечание valud из 88px представляет общая высота headerbar и StatusBar.

-1