Question

我在CodeMirror应用中使用ExtJS。我是这样做的：

 Ext.create('Ext.container.Viewport',{
   layout:'border',
   items:[{
      region:'center',
      layout:'fit',
      border:false,
      dockedItems:[{
         xtype:'toolbar',
         items:[{
             xtype:'button',
             text:'push me!'
         }]
      }],
      html:'<textarea name="code" id="code"></textarea>',
      listeners:{
         render:function(){
             CodeMirror.fromTextArea(document.getElementById("code"),{
                 lineNumbers:true,
                 //fullScreen:true,
                 mode:{name:'javascript',globalVars:true}
             });
         }
      }
    }]
 });

问题是textarea有一些固定的高度，在库中定义。因此，即使我向元素添加了width和height参数，或style:height:100%，它也没有效果。如果我使用fullScreen选项，那么我的textarea甚至会隐藏顶部的toolbar。

修改

我使用css：

做到了

.CodeMirror {
       width: 100% !important;
       height: 100% !important;
  }

虽然，我在图书馆发现了一个错误。如果您将光标放在textarea内的最后一行并点击Enter，则textarea上方的元素已损坏。

修改。完整的测试用例

<html>
<head>
<style type="text/css">
  body {
    margin: 0;
    padding: 0;
  }
  .CodeMirror {
       width: 100% !important;
       height: 100% !important;
  }     
</style>
<link rel="stylesheet" type="text/css" href="/static/ext-5.0.1/packages/ext-theme-classic/build/resources/ext-theme-classic-all.css">
<link rel="stylesheet" type="text/css" href="/static/app/pages/lib/js/codemirror-4.7/lib/codemirror.css">
<link rel="stylesheet" type="text/css" href="/static/app/pages/lib/js/codemirror-4.7/addon/display/fullscreen.css">
<script type="text/javascript" src="/static/ext-5.0.1/build/ext-all.js"></script>
<script type="text/javascript" src="/static/ext-5.0.1/build/packages/ext-locale/build/ext-locale-ru.js"></script>    
<script type="text/javascript" src="/static/app/pages/lib/js/codemirror-4.7/lib/codemirror.js"></script>
<script type="text/javascript" src="/static/app/pages/lib/js/codemirror-4.7/mode/javascript/javascript.js"></script>
<script type="text/javascript" src="/static/app/pages/lib/js/codemirror-4.7/addon/display/fullscreen.js"></script>
<script type="text/javascript">

   var MYAPP={
       CM:{},
       setCodeMirror:function(obj){
          this.CM=obj;
       },
       getCodeMirror:function(){
          return this.CM;
       }
   }

   Ext.Loader.setConfig({enabled:true, disableCaching:true});

   Ext.Loader.setPath('Ext.ux','/static/ext-5.0.1/examples/ux');

   Ext.require(['*']);

   Ext.onReady(function(){ 

       Ext.tip.QuickTipManager.init();

       Ext.create('Ext.container.Viewport',{
           layout:'border',
           items:[{
               region:'center',
               layout:'fit',
               border:false,
               dockedItems:[{
                   xtype:'toolbar',
                   items:[{
                       xtype:'button',
                       icon:'/static/app/img/save.png',
                       tooltip:'Сохранить',
                       handler:function(){
                       // This tabpanel is corrupted when you hit Enter  
                       }
                   }]
               }]
           }]
       });

   });      

</script>
</head>
<body> 
<br/><br/>
<textarea id="code" name="code">...Write here a lot of text, so that the last line will be beyond visible arear of the screen... Then scroll down, put cursor to the last line and hit Enter. You will see that the tabpanel with a button is corrupted</textarea>
<script type="text/javascript">
   MYAPP.setCodeMirror(CodeMirror.fromTextArea(document.getElementById("code"),{
       lineNumbers:true,
       mode:{name:'javascript',globalVars:true}
   }));
</script>
</body>
</html>

Answer 1

首先，如果将<textarea>标记转换为CodeMirror实例，则会隐藏{{1}}标记，因此，设置textarea的样式确实无效。

其次，如果在最后一行按Enter键，CodeMirror肯定不会破坏文档。这可能与您的设置有关。如果您创建一个演示该问题的最小HTML页面，并在CodeMirror bug tracker中提交问题，我可能会给您一个解决方案。

如何将codemirror实例的大小调整为父对象的完整高度？

1 个答案: