Question

我想在按钮点击时动态地将textareas添加到div元素。在附加textarea后，我使用CodeMirror.fromTextArea创建Codemirror textarea编辑器实例，添加了codemirror textarea编辑器，但未应用css样式高度auto。我希望codemirror编辑器具有自动高度并在用户键入时展开。这是代码

<style type="text/css">
  .CodeMirror {
    border: 1px solid #eee;
    height: auto;
  }
</style>

<script>
$(document).ready(function(){       
  count=0 
  $('#addtextcells').click(function(){
    var newtextarea='<textarea id="check'+count+"textarea"+'"></textarea>'
    textareaid='check'+count+'textarea'
    arun='#'+textareaid           
    $('body').append(newtextarea)
    var editor= CodeMirror.fromTextArea(document.getElementById(textareaid), {
      lineNumbers: true,
      viewportMargin: Infinity  
    }); 
    count++
  });  
});
</script>    

<button id="addtextcells">Add Cells</button>

编辑器高度未设置为自动，但如果我在样式中给出固定高度，则编辑器的高度会正确调整。任何解决方案

Answer 1

我自己找到了解决方案，将Codemirror滚动高度的css样式设置为auto就可以了。最终的CSS应该是这样的

  <style type="text/css">
    .CodeMirror {
      border: 1px solid #eee;
      height: auto;
     }
   .CodeMirror-scroll {
       height: auto;
     }
  </style>

codemirror动态textarea实例未应用css样式

1 个答案: