面板中的CodeMirror编辑器

Question

我正在构建一个个人使用的小型extjs 5.1应用程序，旨在保存我的extjs应用程序中使用的函数/方法的示例。

最相关的部分，具有功能列表的网格，以及带有显示记录（脚本）内容的textarea的面板。

This Works。

现在我试图用CodeMirror编辑器替换textarea字段，以便查看最佳脚本并使语法更加轻松。

我下载了CodeMirror，并将其放在我的应用程序的名称为CodeMirror的文件夹中。

在我的应用程序的索引文件中加入：

<link rel = "stylesheet" href = "CodeMirror/lib/codemirror.css"> 
<script src = "CodeMirror/lib/codemirror.js"> </ script> 

不过，我不能够访问THES文件codemirror.css和codemirror.js或添加编辑器面板，例如用

var editor = CodeMirror.fromTextArea (textarea, { 
    lineNumbers: true 
}); 

我希望在这个问题上的一些指导。

Answer 1

我支持Tarabass建议的有关包含库fi LES。但是，如果你在ExtJS的textarea的分量变换为CodeMirror面对的问题，那么请参考下面的代码：

xtype: 'textarea', 
listeners: { 
    afterrender:function(textarea){ 

     var textAreaElement = textarea.getEl().query('textarea')[0]; 
     var editableCodeMirror = CodeMirror.fromTextArea(textAreaElement, { 
       mode: "javascript", 
       theme: "default", 
       lineNumbers: true 
     }); 

     editableCodeMirror.getDoc().setValue("console.log('Hello CodeMirror')"); 
    } 
} 

我创建了一个捣鼓你; https://fiddle.sencha.com/#fiddle/te1

Answer 2

你不应该编辑索引文件。相反，将您想要包含的文件添加到app.json中的相应部分。

对于JavaScript：

/** 
* List of all JavaScript assets in the right execution order. 
* 
* Each item is an object with the following format: 
* 
*  { 
*   // Path to file. If the file is local this must be a relative path from 
*   // this app.json file. 
*   // 
*   "path": "path/to/script.js", // REQUIRED 
* 
*   // Set to true on one file to indicate that it should become the container 
*   // for the concatenated classes. 
*   // 
*   "bundle": false, // OPTIONAL 
* 
*   // Set to true to include this file in the concatenated classes. 
*   // 
*   "includeInBundle": false, // OPTIONAL 
* 
*   // Specify as true if this file is remote and should not be copied into the 
*   // build folder. Defaults to false for a local file which will be copied. 
*   // 
*   "remote": false, // OPTIONAL 
* 
*   // If not specified, this file will only be loaded once, and cached inside 
*   // localStorage until this value is changed. You can specify: 
*   // 
*   // - "delta" to enable over-the-air delta update for this file 
*   // - "full" means full update will be made when this file changes 
*   // 
*   "update": "",  // OPTIONAL 
* 
*   // A value of true indicates that is a development mode only dependency. 
*   // These files will not be copied into the build directory or referenced 
*   // in the generate app.json manifest for the micro loader. 
*   // 
*   "bootstrap": false // OPTIONAL 
*  } 
* 
*/ 
"js": [ 
    { 
     "path": "${framework.dir}/build/ext-all-rtl-debug.js" 
    }, 
    { 
     "path": "app.js", 
     "bundle": true 
    } 
], 

和CSS：

/** 
* List of all CSS assets in the right inclusion order. 
* 
* Each item is an object with the following format: 
* 
*  { 
*   // Path to file. If the file is local this must be a relative path from 
*   // this app.json file. 
*   // 
*   "path": "path/to/stylesheet.css", // REQUIRED 
* 
*   // Specify as true if this file is remote and should not be copied into the 
*   // build folder. Defaults to false for a local file which will be copied. 
*   // 
*   "remote": false, // OPTIONAL 
* 
*   // If not specified, this file will only be loaded once, and cached inside 
*   // localStorage until this value is changed. You can specify: 
*   // 
*   // - "delta" to enable over-the-air delta update for this file 
*   // - "full" means full update will be made when this file changes 
*   // 
*   "update": ""  // OPTIONAL 
*  } 
*/ 
"css": [ 
    { 
     "path": "bootstrap.css", 
     "bootstrap": true 
    } 
], 

如果你把你想加入上述“默认文件”像app.js你一直访问这些文件命名空间，它们包含在您的生产版本中，它们可以缓存，并且可以在更新过程中使用它们。