How to automatic resize tinyMCE?

Question

I have a TinyMCE that is set over a TextArea, and I want this editor area to ocuppy all the space of its parent div, all times.

I have a JS function that get the cur

Answer 1

This is an old question, but apparently it still drags a lot of attention nowadays (Second half of 2020).

Sadly, with the release of the TinyMCE v5, most of the workarounds I found simply do not work anymore. I am sure they worked once, but every TinyMCE release seems to bring new "constrainings" that cripple those workarounds...

Without making it a discussion, I believe it is the cost of evolution. For an old product like the TinyMCE, it is incredible to see it is still around and kicking, staying way above the competition. It is by far one of the most efficient and flexible solutions for all environments, including mobile and for those new languages and frameworks that born since (which seems to be a trend lately, with new ones coming out of the blue every day).

So, with that in my mind, and after so many (failed) attempts to make most of the proposed solutions work, I decided to dig into the source code (TinyMCE v5.4) to better understand it. What I found was a much superior product overall, and that the solution everyone has been looking for is much simpler to implement than I was anticipating.

With no further delay, here my solution that simply works. It implements an editor that takes the entire document area (or whatever area you want), which WILL resize with the browser, requiring NO script, NO hack, and NO trick that could cause cross-browsing issues. Here's how:

1. Give to your and DOM objects the missing properties of size and adjust the spacing accordingly to your needs:

html, body {
   width    : 100%;
   height   : 100%;
   margin   : 0 !important;
   padding  : 0 !important;
   overflow : hidden;  /* Required if you want to have the editor taking the entire page. */
                       /* Otherwise, set as you need it. */
}

2. TinyMCE suggests the </code> to be embedded inside a <code><form></code> object. Regardless if you use it as suggested or not, simply give to it and ID and the following CCS properties (in my case, it is set as <code><form method="post" id="editorBase"></code>):</li> </ol> <pre><code>#editorBase { display : block !important; width : 100% !important; height : 100% !important; } </code></pre> <ol start="3"> <li>In the <strong>TinyMCE Init</strong> method, add or modify the following settings:</li> </ol> <pre><code>tinymce.init({ // Required Settings: width : '100%', // Note value is set as "string". height : '100%', // Note value is set as "string". resize : false, // Suggestion: disable the statusbar resizing. :) // Suggested Settings: toolbar_sticky : true, // Keep the menu and tollbar in a fixed position . toolbar_location : 'top', // You can try 'top', 'bottom' or 'auto'. toolbar_mode : 'floating', // It is simply a button behavior settings. // Options are: 'floating', 'sliding', 'scrolling', or 'wrap'. }); </code></pre> <ol start="4"> <li><p>Yet in the <strong>TinyMCE Init</strong> settings, find the <code>plugins</code> item and <strong>remove</strong> the <code>autoresize</code> option from it (it is the most important step of all!).</p> </li> <li><p>Done! Try and test it! (YES! It is all done!)</p> </li> </ol> <p>With those simple adjustments you can set the editor to fit any design. Feel free to adjust it as needed. Just don't forget to set the <code>width</code> and the <code>height</code> properties in the <strong>TinyMCE Init</strong> settings as strings, and keep it consistent with the CSS settings for the <code><form></code>.</p> <p>The reason to use strings in the <code>width</code> and <code>height</code> properties of the <strong>TinyMCE Init</strong> settings instead of numeric values is to allow you to use "%", "em", "pt", etc... Otherwise, the presented solution would never work.</p> <p>Another trick to make it even more neat is to set the editor as <em><strong>borderless skin</strong></em> (a feature only present in the "<em>professional</em>" version of TinyMCE). No, it is not a <em>hack</em>, it is a siple adjustment to the CSS and totaly allowed by TinyMCE's EULA and Licensing. Simply add the following CSS to your page Stylesheet and it enjoy a borderless editor for free:</p> <pre><code>.tox-tinymce { border:none !important; } </code></pre> <p>Could not be easier than that.</p> <p>Happy coding!</p> </p> <div class="appendcontent"> </div> </div> <div class="jieda-reply"> <span class="jieda-zan button_agree" type="zan" data-id='665763'> <i class="iconfont icon-zan"></i> <em>0</em> </span> <span type="reply" class="showpinglun" data-id="665763"> <i class="iconfont icon-svgmoban53"></i> 讨论(0) </span> <div class="jieda-admin"> </div> <div class="noreplaytext bb"> <center><div> <a href="https://www.e-learn.cn/qa/q-176037.html"> 查看其它12个回答 </a> </div></center> </div> </div> <div class="comments-mod " style="display: none; float:none;padding-top:10px;" id="comment_665763"> <div class="areabox clearfix"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label> <div class="layui-input-block" style="margin-left:90px;"> <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" /> <input type='hidden' value='0' name='replyauthor' /> </div> <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="665763">提交评论 </span></div> </div> </form> </div> <hr> <ul class="my-comments-list nav"> <li class="loading"> <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' />  加载中... </li> </ul> </div> </li> </ul> <div class="layui-form layui-form-pane"> <form id="huidaform" name="answerForm" method="post"> <div class="layui-form-item layui-form-text"> <a name="comment"></a> <div class="layui-input-block"> <script type="text/javascript" src="https://www.e-learn.cn/qa/static/js/neweditor/ueditor.config.js"></script> <script type="text/javascript" src="https://www.e-learn.cn/qa/static/js/neweditor/ueditor.all.js"></script> <script type="text/plain" id="editor" name="content" style="width:100%;height:200px;"></script> <script type="text/javascript"> var isueditor=1; var editor = UE.getEditor('editor',{ //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个 toolbars:[['source','fullscreen', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'link', 'unlink', 'anchor', '|', 'simpleupload', 'insertimage', 'scrawl', 'insertvideo', 'attachment', 'map', 'insertcode', '|', 'horizontal', '|', 'preview', 'searchreplace', 'drafts']], initialContent:'', //关闭字数统计 wordCount:false, zIndex:2, //关闭elementPath elementPathEnabled:false, //默认的编辑区域高度 initialFrameHeight:250 //更多其他参数，请参考ueditor.config.js中的配置项 //更多其他参数，请参考ueditor.config.js中的配置项 }); editor.ready(function() { editor.setDisabled(); }); $("#editor").find("*").css("max-width","362px"); </script> </div> </div> <div class="layui-form-item"> <label for="L_vercode" class="layui-form-label">验证码</label> <div class="layui-input-inline"> <input type="text" id="code" name="code" value="" required lay-verify="required" placeholder="图片验证码" autocomplete="off" class="layui-input"> </div> <div class="layui-form-mid"> <span style="color: #c00;"><img class="hand" src="https://www.e-learn.cn/qa/user/code.html" onclick="javascript:updatecode();" id="verifycode"><a class="changecode" href="javascript:updatecode();"> 看不清?</a></span> </div> </div> <div class="layui-form-item"> <input type="hidden" value="176037" id="ans_qid" name="qid"> <input type="hidden" id="tokenkey" name="tokenkey" value=''/> <input type="hidden" value="How to automatic resize tinyMCE?" id="ans_title" name="title"> <div class="layui-btn layui-btn-disabled" id="ajaxsubmitasnwer" >提交回复</div> </div> </form> </div> </div> <input type="hidden" value="176037" id="adopt_qid" name="qid" /> <input type="hidden" id="adopt_answer" value="0" name="aid" /> </div> <div class="layui-col-md4"> <!-- 热门讨论问题 --> <dl class="fly-panel fly-list-one"> <dt class="fly-panel-title">热议问题</dt> <!-- 本周热门讨论问题显示10条-->