web-dev-qa-db-ja.com

tinyMceエディターの高さを動的に変更する

私は自分のページでtinymceエディターを使用しています。私がやりたいのは、エディターの高さを動的に変更することです。関数を作成しました：

function setComposeTextareaHeight()
{
    $("#compose").height(200);
}

しかし、それは機能していません。私のtextareaは

<textarea id="compose" cols="80" name="composeMailContent" style="width: 100%; height: 100%">

高さを変えるためにいろいろな方法を試しましたが、解決できませんでした。足りないものはありますか？

javascriptjquerytinymce
12
Ansh

ResizeToテーマメソッドを使用してtinymceのサイズを変更できます。

   editorinstance.theme.resizeTo (width, height);

幅と高さによって編集領域の新しいサイズが設定されます-エディターインスタンスの余分なサイズを推測する方法が見つからないため、次のような操作を行うことをお勧めします。

   editorinstance.theme.resizeTo (new_width - 2, new_height - 32);
15
Marc Lehmann

試してみてください：

tinyMCE.init({
       mode : "exact",
       elements : "Elm1",
     ....

JavaScriptコードでサイズを動的に変更するには：

var resizeHeight = 350;
var resizeWidth = 450;
    tinyMCE.DOM.setStyle(tinyMCE.DOM.get("Elm1" + '_ifr'), 'height', resizeHeight + 'px');
    tinyMCE.DOM.setStyle(tinyMCE.DOM.get("Elm1" + '_ifr'), 'width', resizeWidth + 'px');
12
Gufo Rosso

以下は この他のSO私が投稿した回答 ：

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();
}
9
Kyle Falconer

少し遅いですが、私のようなGoogle社員の場合は、 autoresizeプラグイン を確認してください。

tinymce.init({
    plugins: "autoresize"
});

オプション

autoresize_min_height：自動サイズ変更時のエディターの最小高さ値。

autoresize_max_height：自動サイズ変更時のエディターの最大高さ値。

6
0x1gene

ManseUKが述べたことはほぼ正しいです。正しい解決策は次のとおりです。

$('#compose_ifr').height(200);

またはあなたの場合

$('#composeMailContent_ifr').height(200);

更新：多分これはあなたが探しているものです：

    // resizes editoriframe
    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 = 200 + 26;
            }
            else if (currentfr.Document && currentfr.Document.body.scrollHeight) { //ie5+ syntax
                    currentfr.height = 200;
            }
            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

私はtinymce4.8.3を使用しています。

サイズ変更可能なモーダルダイアログボックスにエディターを表示します。

SASS/SCSSに示されているflexboxを使用してこれを解決しました。

// TinyMCE editor is inside a container something like this
.html-container {
    height: 100%;
    overflow: hidden;
}

.mce-tinymce {
    // This prevents the bottom border being clipped
    // May work with just 100%, I may have interference with other styles
    height: calc(100% - 2px);

    & > .mce-container-body {
        height: 100%;
        display: flex;
        flex-direction: column;

        & > .mce-edit-area {
            flex: 1;

            // This somehow prevents minimum height of iframe in Chrome
            // If we resize too small the iframe stops shrinking.
            height: 1px; 
        }
    }
}

エディターが初期化されると、IFRAMEに100％の高さを設定するように指示する必要があります。私の場合、2pxも差し引く必要があります。そうしないと、右側の境界線が切り取られます。

tinymce.init({
    ...
    height: "100%",
    width: "calc(100% - 2px)"
});
0
Etherman

誰かがこれを見つけて、ソースコードエディタの高さプラグインも変更したい場合。

次のファイルを編集する必要があります。

\tiny_mce\plugins\code\plugin.min.js

minHeighという属性を探して、必要に応じて調整します。そこに定義する高さは、ボックス全体の高さではありませんが、テキスト領域の高さでもありません。それはその中間です。

0
Jenny O'Reilly