面板中的 CodeMirror 编辑器

Question

我正在构建一个供个人使用的小型 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
});

我希望能就此问题提供一些指导。

Answer 1

永远不要编辑索引文件。而是将要包含的文件添加到 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
    }
],

如果您将要包含的文件放在 'default files' 上方，例如 app.js，您始终可以访问这些名称空间，它们包含在您的生产构建中，它们是可缓存的，您可以使用他们在你的更新过程中..

Answer 2

我支持 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')");
    } 
}

我已经为你创建了一个fiddle； https://fiddle.sencha.com/#fiddle/te1

面板中的 CodeMirror 编辑器

CodeMirror editor within a panel

javascript

extjs

codemirror

extjs5