web-dev-qa-db-ja.com

tinyMCEの自動サイズ変更方法

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

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

また、textareaの幅は100％です。 TinyMCEも使用している場合、HTMLレンダリングによってサイズ変更されません。

何か案は？

javascripthtmlresizetinymceautoresize
31
igorsantos07

最近では、tinyMCEに付属の autoresize plugin を使用する必要があります。このようにtinyMCEを呼び出す必要があります（jQueryバージョン）：

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

init_instance_callbackでサイズ変更を手動で呼び出して、initに正しい高さを提供すると役立つ場合があるという経験をしました。これが必要な場合は、渡されたオプションにこのパラメーターを追加します。

init_instance_callback: function (inst) { inst.execCommand('mceAutoResize'); }
49
bfncs

ポイントは、TinyMCEがtextareaの代わりにiframeを生成し、このIDがoriginalID + "_ ifr"であり、コントロールとエディター領域を保持するためのテーブルoriginalID + "_ tbl"があることです。

流体の幅を作成するには：

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


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

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およびonresizebodyイベント内でコードと関数呼び出しを使用できます。

14
igorsantos07

tinymce 3.4.6では、設定

width:'100%'

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

9
ZHAO Xudong

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

JSを使用して小さなMCEを動的に実行している場合、スタイルの調整にMCEエディターをまだ使用できないタイミングの問題が発生する可能性があります。これに対処するには、古い学校のタイムアウトを使用できます。

この例では、JQueryに「j」名前空間を使用しています。エディターがサイズを変更する流体divにある場合、これを$（window）.resize（function（）{}）;に含めることができます。リスナー。

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)
3
Noel Baron

バージョン4とブラウザでflexboxレイアウトを使用するオプションを使用して、親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が親を100％埋めるために必要なだけの列スペースを占有し、textareaの周りにdivを配置することで行われるということです：<div class="tinycme-full"> <textarea ... /></div>

Jqueryやその他の依存関係は不要で、親を100％満たします。 enter image description here

2
Poul K. Sørensen

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を変更するために改訂されました。これは、あなたが何をしても関係ありません。

1
liquibyte

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

  1. Iframeの高さを100％に設定します。

    tinymce.init（{height： '100％'}）

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

    。mce-tinymce {height：auto;幅：100％;位置：絶対;左：0; top：0;下：0; }

    。bq-editor .mce-container-body {height：100％; }

    。bq-editor .mce-edit-area {position：absolute;上：57px;下：0;幅：100％;高さ：自動; }

注：ツールバー行が1行あり、上部：57px; .bq-editorの.mce-edit-areaはツールバーのパディングです。

1
SyCoDeR

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

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

「_tbl」のサイズを変更しても編集領域のサイズが変更されないため、「_ tbl」ではなく「_ifm」要素のサイズを変更します。次に、「_ ifr」をコンテナdivよりも85ピクセル短くすることで、ツールバーとステータスバー用のスペースを確保します。

おそらくコンテナ要素を表示するアニメーションがあるため、setTimeoutを使用して機能させる必要がありました。

1
emmanuel2004

これらのソリューションはどれも私にとって100％機能しませんでした。初期化時と編集中に調整するために高さが必要でした。私がしたことは、iFrameのHTML要素の高さを取得し、さらに高さを100ピクセル追加してiFrameに適用しました。

私のソリューションは次のとおりです：（レスポンシブ画像のimg max-widthを追加しました）

初期化時

   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);   
    });
}
0
DobotJr

Iframeのラッパー（IDが_ifrで終了）は、ロールとしてアプリケーションを持つspanの最初の親です。したがって、ラッパーを取得するには：

$('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'))
0
Abdennour TOUMI