javascript - wysihtml5 文本区域调整大小

Question

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

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

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

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

Answer 1

一旦编辑器加载了编辑器的css，它就会自行更改；

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

Answer 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"