[英]CodeMirror editor within a panel
我正在構建一個供個人使用的小型extjs 5.1應用程序,旨在保存extjs應用程序中使用的函數/方法的示例。
最相關的部分是帶有功能列表的網格和帶有文本區域的面板,該面板顯示記錄(腳本)的內容。
這可行。
現在,我試圖用CodeMirror編輯器替換textarea字段,以查看最佳腳本並使用語法高亮顯示。
我下載了CodeMirror,並將其命名為CodeMirror放在我的應用程序文件夾中。
在我的應用程序索引文件中添加了:
<link rel = "stylesheet" href = "CodeMirror / lib / codemirror.css">
<script src = "CodeMirror / lib / codemirror.js"> </ script>
但是,我無法訪問它們的文件codemirror.css和codemirror.js或將編輯器添加到面板中,例如使用
var editor = CodeMirror.fromTextArea (textarea, {
lineNumbers: true
});
我希望能對此問題提供一些指導。
您永遠不要編輯索引文件。 而是將要包含的文件添加到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”之類的“默認文件”之上,則您始終可以訪問這些名稱空間,它們包含在生產版本中,它們是可緩存的,您可以在更新過程中使用它們。
我支持Tarabass關於包含庫文件的建議。 但是,如果在將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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.