题

我有一个介绍该设在一个TextArea，我想这个编辑器区ocuppy的所有空间的其父div，所有的时间。

我有一个JS功能，获取当前的空间和设textarea.风格。高度，但是，当我能够命令这似乎停止工作。

此外，textarea有宽度：100%;它不调整由HTML呈现时，它使用的介绍。

任何想法？

有帮助吗？

解决方案

现在，你应该使用自带的TinyMCE的的 AUTORESIZE插件。你将不得不调用tinyMCE的这样的（jQuery的版本）：

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

我提出的经验，这可能是有帮助手动调用调整大小在init_instance_callback提供关于初始化正确的高度。这个参数添加到传递的选择，如果你需要这样的：

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

其他提示

的一点是，TinyMCE的生成textarea的地方的iframe，与此ID：originalID +“_ IFR”，和一个表originalID +“_ TBL”用于保持所述控制和编辑器区域

为了使流体宽度：

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

结果

为了使流体高度：

更改dinamically document.getElementById(id+'_ifr').style.height您想通过JS的高度。结果 这是我使用这个脚本：

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”的命名空间。如果你的编辑器是在改变大小流体格，你可能要包括这在$（窗口）.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版本，在浏览器中选择使用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);

我们的想法是，它根据需要进行填补母公司100％，其通过将一个div在你的textarea做了所有需要的div占据尽可能多的列空间：<div class="tinycme-full"> <textarea ... /></div>

没有jquery的或其他依赖需要和d它现在填充父100％。 “在这里输入的图像描述”

我有同样的问题，阅读此线程我结束了这个代码后

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

我调整“_ifm”元素，而不是“_tbl”，因为调整了“_tbl”没有调整编辑区我。然后，我通过使“_ifr” 85个像素短于div容器离开的工具栏和状态的一些空间。

我不得不使用的setTimeout，使其工作，也许是因为我有一个动画显示的容器元素。

我是使用纯css方案来实现这一点(介绍4.0.20).

  1. 设框架的高度100%:

    命令.init({ 高度：'100％的' })

  2. 增加样式自动调整大小的面容器：

    .切-命令{高度：自动；宽度：100%;职位：绝对的；左：0;上：0;下：0;}

    .bq编辑器。切-容器体{高度：100%;}

    .bq编辑器。切-编辑地区的{的位置：绝对的；上：57px;下：0;宽度：100%;高度：自动；}

注： 我有一个工具条线，面:57px;中。bq编辑器。切-编辑的区域工具栏填充。

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元素的高度，然后用额外的100像素施加的高度到的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