动态改变tinyMce编辑器的高度

Question

我在我的页面中使用tinymce编辑器。我想做的是动态改变编辑器的高度。我创建了一个函数：

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

但这不起作用。 我的文本区域是

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

我已经尝试了各种改变高度的方法，但无法得出解决方案。我有什么遗漏的吗？

Answer 1

您可以使用resizeTo主题方法调整tinymce的大小：

   editorinstance.theme.resizeTo (width, height);

宽度和高度设置编辑区域的新大小 - 我还没有找到一种方法来推断编辑器实例的额外大小，所以你可能想做这样的事情：

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

Answer 2

尝试：

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');

Answer 3

以下内容来自我发布的其他答案：

上述内容在 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();
}

Answer 4

有点晚了，但对于像我这样的 Google 员工来说，请检查 autoresize 插件

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

选项

autoresize_min_height：编辑器自动调整大小时的最小高度值。

autoresize_max_height：编辑器自动调整大小时的最大高度值。

Answer 5

我使用的是tinymce 4.8.3。

我在可调整大小的模式对话框中显示编辑器。

我使用 Flexbox 解决了这个问题，如 SASS/SCSS 所示：

// 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)"
});

Answer 6

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(';'));
        }
    },

Answer 7

可以根据自己的身高来设置

tinymce.init({
     height: "500px"
});

Answer 8

我在

TinyMCE

的版本 5 上测试了这个解决方案。
要在页面加载后更改

TinyMCE

的高度，您只需要：

your element id

$(function(){
    var selectedElement = tinymce.get('Element id without sharp(#)');
    selectedElement.settings.height = 700;
    selectedElement.settings.max_height = 400;
    selectedElement.settings.min_height = 1000;
});

您还可以使用

autoresize

插件以获得更好的体验：

tinymce.init({
    plugins: 'wordcount autoresize',
})

Answer 9

以下代码应该适用于版本 6

const wishedHeight = '100px'
// get `editor` from context of callbacks like `init`, `setup`, `loaded`, etc 
editor.editorContainer.style.height = wishedHeight; 

Answer 10

默认情况下，TinyMCE 读取

element.style.height

并使用它：

<textarea class="editor" style="height: 500px"></textarea>

但是，只有当该元素在tinymce设置期间可见时才有效；如果它被隐藏（例如在折叠的元素/非活动选项卡内），则忽略内联高度并设置 200px 的默认高度。

为了克服这个问题，需要在初始化参数中添加以下内容：

$('.editor').tinymce({
    setup: (editor) => {
        editor.on('init', () => {
            // Both editorContainer and targetElm are only available here.
            editor.editorContainer.style.height = editor.targetElm.style.height;
        });
    }
});

这适用于所有内容，并允许自定义页面上的每个单独的编辑器。

您也可以在初始化后的任何其他时间点执行此操作，只需检索

editor

；如果页面中只有一个 

textarea

，那么 

tinymce.activeEditor

 就可以，但如果有多个，那么 

tinymce.get('id_of_specific_textarea')

 就可以了。

Answer 11

万一有人发现这个并且还想更改源代码编辑器

插件的高度。

您需要编辑以下文件：

\tiny_mce\plugins\code\plugin.min.js 留意名为

minHeigh

 的属性并根据您的需要进行调整。您定义的高度不是整个框的高度，但也不是文本区域的高度。这是介于两者之间的东西。

Answer 12

 $(window).load(function () {

$('#YourID_ifr').css('height', '550px');

});