15

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 高すぎます (ツールバーの高さ)。

これは機能しますが、ブラウザで自動的にサイズ変更されず、現在約 79% しかサポートされていない calc() を使用します: http://jsfiddle.net/MLJaN/2/

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

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

4

10 に答える 10

8

あなたが金槌であるとき、すべての問題は釘のように見えます。タグが機能するため、これには 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 を変更するため、修正されました。これは、何をしても機能します。

于 2015-03-26T16:58:35.480 に答える
7

I solved this problem with pure CSS by using flex-boxes.

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

This way you don't have to care about the sizes of the menu-bar and other elements.

JSFiddle demo: https://jsfiddle.net/hk5a53d8/

于 2016-10-27T19:17:20.060 に答える
0

これだけで角度固定で、

@Component({
  selector: 'serta-tinymce',
  template: `<textarea **style="min-height:500px"** id="store-description"></textarea>`,
  styles: []
})
于 2017-12-15T14:01:07.690 に答える
0

まだ悩んでいる方へ：

.tox-tinymce{
  height: 100% !important;
}

そのための API が提供されていない場合は、CSS のオーバーライドが UI 調整の最も洗練されたソリューションです。

于 2021-11-26T05:41:24.543 に答える
-1

仕事に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;
}

88px という値は、ヘッダーバーとステータスバーを合わせた高さを表すことに注意してください。

于 2016-02-07T10:46:14.833 に答える