web-dev-qa-db-ja.com

TinyMCE 4および含有要素内の100％の高さ

TinyMCE3から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;
 }

ライブフィドルでわかるように、これはツールバーの「高すぎる」ピクセル数です。つまり、34px高すぎます（ツールバーの高さ）。

これは機能しますが、ブラウザで自動的にサイズ変更されることはなく、現在サポートされているのは約79％のみであるcalc（）を使用します： http://jsfiddle.net/MLJaN/2/

今、私はエディター全体をコンテナーに入れて流動的にサイズ変更できるようにする純粋なCSS（calc（）関数なし）ソリューションを探しています。

どんなポインタでも大歓迎です。

csstinymceheighttinymce-4
12
JDR

あなたがハンマーであるとき、すべての問題は釘のように見えます。タグが機能するため、これには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
liquibyte

flex-boxesを使用して、純粋な[〜＃〜] css [〜＃〜]でこの問題を解決しました。

<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/

5
Daveman

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
Paul

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
Kevin Day

angularこれだけで修正、

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

#editor-wrapper .mce-tinymce.mce-container.mce-panel,
#editor-wrapper .mce-container-body.mce-stack-layout {
    height: 100%;
}

#editor-wrapper .mce-edit-area.mce-container.mce-panel.mce-stack-layout-item {
    height: calc(100% - 75px); /* 75 is tinymce header and footer height*/
}

#editor-wrapper iframe {
    height: 100% !important;
}
0
r.enayati

私の問題をこれほどうまく修正したものはありませんでした。上からのカップルの答えの組み合わせです。

$(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
chickens