面板中的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你一直訪問這些文件命名空間，它們包含在您的生產版本中，它們可以緩存，並且可以在更新過程中使用它們。