tinyMCE を自動的にサイズ変更するにはどうすればよいですか?

StackOverflow https://stackoverflow.com/questions/1799123

質問

TextArea 上に設定された TinyMCE があり、このエディター領域が親 div のすべてのスペースを常に占有するようにしたいと考えています。

現在のスペースを取得し、それに textarea.style.height を設定する JS 関数がありますが、TinyMCE を有効にすると機能しなくなるようです。

また、テキストエリアの幅は次のとおりです。100%;TinyMCE を使用している場合も、HTML レンダリングによってサイズ変更されません。

何か案は？

役に立ちましたか？

解決

今日では、自動サイズ変更プラグインのTinyMCEを付属していますそれを使用する必要があります。あなたはこのようなTinyMCEは（jQueryのバージョン）を呼び出す必要があります。

$('.tinymce').tinymce({
  theme : 'advanced',
  plugins : 'autoresize',
  width: '100%',
  height: 400,
  autoresize_min_height: 400,
  autoresize_max_height: 800,
});

私はそれを手動でinitの正しい高さを提供するために、init_instance_callbackにサイズ変更を呼び出すために役立つかもしれないことを、経験をしました。

：あなたがこれを必要とする場合は、渡されたオプションには、このパラメータを追加します。 
init_instance_callback: function (inst) { inst.execCommand('mceAutoResize'); }

他のヒント

点はTinyMCEは、このIDと、TEXTAREAの代わりにインラインフレームを生成することである：。originalID +「_ IFR」、およびコントロールおよびエディタ領域を保持するテーブルoriginalID +「_ TBL」

流体幅を作るために：

document.getElementById(id+'_tbl').style.width='100%'


流体の高さを作成するには

変更はdinamically JSを通じて、あなたが望む高さにdocument.getElementById(id+'_ifr').style.height。
これは私がこれを使用しているスクリプトです。

function toScreenHeight(id, minus) {
    var height;

    if (typeof(window.innerHeight) == "number") //non-IE
        height = window.innerHeight;
    else if (document.documentElement && document.documentElement.clientHeight) //IE 6+ strict mode
        height = document.documentElement.clientHeight;
    else if (document.body && document.body.clientHeight) //IE 4 compatible / IE quirks mode
        height = document.body.clientHeight;

    document.getElementById(id).style.height = (height - minus) + "px";
}

あなたはonloadとonresize bodyイベント内のコードおよび機能呼び出しを使用することができます。

TinyMCEは3.4.6で、 セット

width:'100%'

のinitオプションで問題を解決します。

あなたはJS経由で動的に小さなMCEをやっている場合は、MCEエディターは、まだスタイルの調整のために利用できないタイミングの問題に実行することができます。これに対処するには、古い学校のタイムアウトを使用することができます。

この例では、私はjQueryのための「J」の名前空間を使用しています。エディタのサイズを変更する流体のdiv内にある場合、あなたは$（ウィンドウ）.resize（関数（）{}）でこれを含めるとよいでしょう。リスナーます。

setTimeout(function(){ 
  $j('.mceEditor').css('width','100%').css('minHeight','240px');
  $j('.mceLayout').css('width','100%').css('minHeight','240px');
  $j('.mceIframeContainer').css('width','100%').css('minHeight','240px');
  $j('#'+[INSERT TEXTAREA ID HERE]+'_ifr').css('width','100%').css('minHeight','240px');
},500)

上記のいずれも考慮し、それらの高さを取って、エディタの高さを設定し、その後、私の解決策は、ツールバー/メニューバー/ステータスバーに基づいて高さを計算することだったので、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();
}

バージョン4と、私は親のdivの全幅、高さの編集経験を得るために、以下のなかった、ブラウザでの使用のフレキシボックスレイアウトにオプションでます。

これはあなたがあなたの既存のスタイルに追加することを好む場合は、ファイルにCSSを入れて簡単にする必要があります。

var css = '.tinycme-full .mce-edit-area {display:flex;flex-flow:column;} .tinycme-full .mce-edit-area iframe {flex:1 1 auto;}  .tinycme-full {height:100%;} .tinycme-full .mce-tinymce.mce-container { width:100%;height:100%;border:0; } .tinycme-full .mce-panel{border:0} .tinycme-full .mce-container-body.mce-stack-layout {display: flex; flex-flow: column;height: 100%;} .tinycme-full .mce-stack-layout-item{  flex: 0 0 auto;} .tinycme-full .mce-edit-area{flex:1 1 auto;} ',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

style.type = 'text/css';
if (style.styleSheet) {
    style.styleSheet["cssText"] = css;
} else {
    style.appendChild(document.createTextNode(css));
}

head.appendChild(style);
<div class="tinycme-full"> <textarea ... /></div>

アイデアは、それは親の100％を満たすために必要な、そのあなたのテキストエリアの周りのdivを置くことによって行われるよう必要なすべてのdivはずっと列空間として取る作るということです

何jqueryのか、他の依存関係が必要とされていないが、それは今の親は100％を満たすANDD。 ここに画像の説明を入力します

私はこのコードで私が終わったこのスレッドを読んだ後、同じ問題を抱えていた。

init_instance_callback: function (inst) { 
  setTimeout(function () {
    document.getElementById(inst.id + '_ifr').style.height= (document.getElementById("theContainerDiv").offsetHeight-85) + 'px';
   },1000);
},

私は「_tbl」をサイズ変更するので、私のために編集領域のサイズを変更していない、「_ifm」要素の代わりに、「_tbl」をリサイズします。それから私は、コンテナのdivの「_ifr」85個のピクセルより短くすることによって、ツールバーやステータスバーのためのいくつかのスペースを残します。

私はアニメーションを持っているかもしれないので、それを動作させるためにはsetTimeoutを使用していたことが表示コンテナ要素ます。

これを実現するために純粋な CSS ソリューション (tinyMCE 4.0.20) を使用しています。

  1. iframe の高さを 100% に設定します。

    tinymce.init（{height：「100％」}）

  2. iframe コンテナのサイズを自動変更するスタイルを追加します。

    .mce-tinymce {高さ:自動;幅：100%;位置：絶対;左：0;上：0;底：0;}

    .bq-editor .mce-container-body { 高さ:100%;}

    .bq-editor .mce-edit-area { 位置:絶対;上：57ピクセル;底：0;幅：100%;身長：自動;}

注記： ツールバー行が 1 行あり、その上部に次の行があります。57ピクセル;.bq-editor の .mce-edit-area はツールバーのパディングです。

SyCoDeRは正しいですが、私はおそらくかかわらず、同じ結果とわずかに異なるパスをたどっています。

/*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のメニュー/ツールバーの追加または削除とが変更されるため改訂。これは、あなたがそれで何をするかに関係なく動作します。

のiframe（_ifrによってそのID仕上げ）のラッパーは、それが役割としてアプリケーションを持っていることをスパンの最初の親です。 このように、ラッパーを取得するには：

$('span[role=application]').parents(':eq(0)')

だから、サイズ変更高さ：

$('[id$=_ifr]').css('height',$('span[role=application]').parents(':eq(0)').css('height'))
リサイズ幅

から

$('[id$=_ifr]').css('width',$('span[role=application]').parents(':eq(0)').css('width'))
これらのソリューションはどれも私のために100％を働いていません。私は、初期化にし、編集中に調整するために高さを必要としていました。私がやったことはグラブはiframe内のHTML要素の高さがあり、その後、余分100pxにとのiFrameに高さを適用します。

ここに私のソリューションです：（応答画像のための追加のimg最大幅）

の初期化

   setup: function(editor) { 
        editor.on('init', function (e) { 
            $("#editor_textarea_ifr").contents().find('img').css("max-width","100%");
            iframeHeight = $("#editor_textarea_ifr").contents().find("html").height();            
            $("#editor_textarea_ifr").css("height",iframeHeight + 100);                     
        });             
    },

ノードの変更（編集）の

  init_instance_callback: function (editor) {
    editor.on('NodeChange', function (e) {
      $("#editor_textarea_ifr").contents().find('img').css("max-width","100%");               
      iframeHeight = $("#editor_textarea_ifr").contents().find("html").height();              
      $("#editor_textarea_ifr").css("height",iframeHeight + 100);   
    });
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top