web-dev-qa-db-ja.com

TinyMCEの幅と高さは不従順です！

TinyMCEの（矛盾する）文書によると、エディターは、それが置き換えるtextarea（または他の）要素のサイズを引き継ぎます。また、{ height: '123', width: '123' }（initメソッド内）。

私は両方を試してもまだ1つの結果しか得られません-エディターは、ユーザーが最後にサイズを変更したときのサイズに変更されます（覚えているかどうかは私にはわかりません）。

javascriptjquerytinymce
27
Jimbo

私はこれについてすべて知っています、それはis非常に迷惑です。

ロードされたCSSファイルにこれを追加すると、幅が固定されます（TinyMCE cssファイルではなく、グローバルcssに配置しただけで、高さでテストしていません）。

.mceEditor > table {
    width:/* my width */ !important;
}

これはすべてのインスタンスに影響し、私の場合は問題ありませんでした。 .mceToolbarでツールバー自体をターゲットにできます

あなたは一種のdo TinyMCEでテキストエリアのサイズを変更したいので、すべてのツールバーアイコンに合わせて十分な幅にすることができます。

18
Wesley Murch

テーマ設定により、最後のサイズが保存されます。以下を使用してオフにすることができます

$('textarea.tinymce').tinymce({
    theme_advanced_resizing: true,
    theme_advanced_resizing_use_cookie : false,
28
Stuart

これが私の修正です。
これはTinyMCEエディターの複数のインスタンスでも機能します（ 'height'プロパティを指定したinit（）は最初のインスタンスでのみ機能するため、エディターボックスの高さを固定または最小にするための回避策です）。

.mceEditor td.mceIframeContainer iframe {
    min-height: 350px !important;
}
.mceEditor table {
    height: auto !important;
}
3
Kamil Bednarz

はい、これは非常に迷惑です。与えられた入力に合わせて高さを調整する独自の関数を書きました。あなたはあなたが望むようにあなたの高さ/幅を設定するためにそれを修正するかもしれません：

    resizeIframe: function(frameid) {
        var frameid = frameid ? frameid : this.editor.id+'_ifr';
        var currentfr=document.getElementById(frameid);

        if (currentfr && !window.opera){
            currentfr.style.display="block";
            if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) { //ns6 syntax
                currentfr.height = currentfr.contentDocument.body.offsetHeight + 26;
            }
            else if (currentfr.Document && currentfr.Document.body.scrollHeight) { //ie5+ syntax
                    currentfr.height = currentfr.Document.body.scrollHeight;
            }
            styles = currentfr.getAttribute('style').split(';');
            for (var i=0; i<styles.length; i++) {
                if ( styles[i].search('height:') ==1 ){
                    styles.splice(i,1);
                    break;
                }
            };
            currentfr.setAttribute('style', styles.join(';'));
        }
    },
1
Thariama
tinyMCE.init({
        mode : "exact",
         .....

mode： "exact"は、ドラッグによってグリッドのサイズを変更する機能を無効にします

1
Gihan Lasita

TinyMCEテキスト領域（私のテーマでは '.mceContentBody'と呼ばれます）が小さすぎ、新しい投稿コンテンツ領域でぎこちなくマージンがとられています。私のテーマには、エディタースタイルと呼ばれるcssファイルがあります。幅を（98％に）変更しましたが、TinyMCEはCookieを使用してエディターのサイズを記憶しているため、CSSの変更は保持されませんでした。 ブラウザのキャッシュをクリアするの後、CSSの幅/マージンの変更が有効になりました。最終的に。ああ。

0
Commandrea

Tinymce.initを使用して「body_id」を追加し、「content_css」でそのIDを使用して、エディターに目的のCSS動作を提供します。そのようです：

tinymce.init({
    selector: "textarea",
    content_css: '/css/app.css',
    body_id: 'new-journal-editor'
});

そしてapp.cssで：

#new-journal-editor {
    height: 123px;
    width: 123px;
}
0
gpkamp

ここには良い提案がたくさんありますが、質問を読んで答えを見つけました。高さや幅に問題はないので、これらすべてがCSSまたは関数の記述で回避されるのはなぜか、ドキュメントのメソッドは機能します。

元々の課題はサイズ変更に関するものでしたが、作者は高さや幅が機能しないとは言っていませんでした。期待したとおりに機能しなかっただけです。

「エディターは、ユーザーが最後にサイズを変更したときのサイズに自分自身のサイズを変更します（覚えているかどうかは私にはわかりません）。」

Saidul Islamは質問に正しく答え、さらに一歩進めるために、StuartはCookieをオフにする方法について説明しました。高さと幅を設定する必要がある場合は、init（）で設定してください。あなたはここでもっと読むことができます：

https://www.tinymce.com/docs/configure/editor-appearance/#min_height

高さと幅の両方で入力領域のサイズを変更すると、以下のように機能します。

tinymce.init({
selector: '.profileTextArea',
plugins : 'advlist autolink link image lists charmap print preview code',
min_height: 400
});
0
user1946891

含まれているテーブルが幅を強制していること、およびアイコンセットがtdであることを確認したので、それらが折りたたまれる最小の幅があるため、1つの行に多くのアイコンがある場合、幅全体が乱れる可能性があります。

関連の並べ替えSO私の質問、あなたの問題にかなり関連していることになりました： td要素を一貫してフロートできますか？

0
danjah

このように幅と高さをエディタ領域に設定する

<style>
#content{width: 620px; height: 500px;} 
</style>

<textarea name="content" id="content" cols="50" rows="15"></textarea>
0
Gihan Lasita

私は同じ問題に直面していますが、結局これをやってしまいます

#tinymce-textarea_ifr {
  min-height: 500px !important;
}
.mce-tinymce {
  width: 96% !important;
  margin: 0 auto !important;
}
0
Abdalla Arbab