如何自動調整 tinyMCE 的大小？

問題描述

我有一個 TinyMCE 設定在一個 TextArea 上，我希望這個編輯區域可以覆蓋其父 div 的所有空間。

我有一個 JS 函式獲取當前空間並設定 textarea.style.height，但是當我啟用 TinyMCE 時，它似乎停止工作。

此外，textarea 的寬度為 100％; 當它使用 TinyMCE 時，它不會透過 HTML 呈現來調整大小。

有任何想法嗎？

最佳解決思路

如今，您應該使用 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'); }

次佳解決思路

關鍵是 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 和 onresize body 事件中的程式碼和函式呼叫。

第三種解決思路

在 tinymce 3.4.6，set

width:'100%'

在 init 選項中會解決問題。

第四種思路

如果您透過 JS 動態地執行小型 MCE，則可能會遇到時間問題，即 MCE 編輯器尚不可用於樣式調整。為瞭解決這個問題，你可以使用一個老學校的超時。

在這個例子中，我使用”j” 名稱空間進行 JQuery 。如果您的編輯器處於改變大小的流體 div 中，則可能需要將其包含在 $(視窗).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)

第五種思路

上面沒有一個在 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 和在瀏覽器中使用 flexbox 佈局的選項，我做了以下操作，以獲得父 div 的全寬度，高度編輯體驗。

如果您希望將 CSS 新增到現有樣式中，那麼將這些 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％，並透過在您的文字區域放置一個 div：<div class="tinycme-full"> <textarea ... /></div>

不需要 jquery 或其他依賴關係，現在它將填充 100％的父級。

參考文獻

How to automatic resize tinyMCE?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

如何自動調整 tinyMCE 的大小？