wysihtml5 文本区域调整大小答案

【问题标题】：wysihtml5 text area resizingwysihtml5 文本区域调整大小
【发布时间】：2013-08-07 04:03:16
【问题描述】：

我正在使用 wysihtml5 编辑器，简单的编辑器示例

http://xing.github.io/wysihtml5/examples/simple.html

一切正常，除了我试图使文本区域的宽度和高度可调整大小。

如果我切换到 html 视图，效果会很好。我想让文本区域在普通文本中调整大小。

【问题讨论】：

解决方案是调整 wysihtml5 编辑器创建的大小。

标签： javascript html editor wysiwyg

【解决方案1】：

编辑器加载后，自行更改编辑器的 css；

jQuery(document).ready(function() {  
    $('.wysihtml5-sandbox').css("resize", "both");
}

【讨论】：

【解决方案2】：

刚刚发现这个使用 wysihtml5-0.3.0.js 的简单解决方案

<style>
textarea { ... min-height:500px; }
</style>

<textarea><?php echo $doc2edit; ?></textarea>

<script>
window.onload = function() {
  resizeEditor(); // resize iframe containing HTML tags
}
function getElementsByClass(node,searchClass,tag) {
  var classElements = new Array();
  var els = node.getElementsByTagName(tag); 
  var elsLen = els.length;
  var pattern = new RegExp("\\b"+searchClass+"\\b");
  for (i = 0, j = 0; i < elsLen; i++) {
   if ( pattern.test(els[i].className) ) {
       classElements[j] = els[i];
       j++;
  } } return classElements; 
}
function resizeEditor(){
  // resize elem with class 'wysihtml5-sandbox' 
  var el = getElementsByClass(document,'wysihtml5-sandbox','*');
  for (i = 0; i < el.length; i++) {
  el[i].style.height = (editor.composer.commands.doc.body.clientHeight+20)+"px";
  }
}
</script>

在 wysihtml5-0.3.0.js 中：

BOX_FORMATTING = [
 ...., "min-height"

【讨论】：