面板中的CodeMirror编辑器 [英] CodeMirror editor within a panel

问题描述

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

I am building a small extjs 5.1 app for personal use, designed to save examples of functions / methods used in my extjs apps.

最相关的部分具有功能列表的网格以及显示记录内容​​（文本）的文本区域的面板。

The most relevant part, has a grid with a list of functions, and a panel with a textarea that displays the contents of records (scripts).

这样做。

现在我试图通过 CodeMirror 编辑器替换textarea字段，以获得最佳脚本查看并具有更高的语法。

Now I'm trying to replace the textarea field by CodeMirror editor for optimal scripts viewing and have syntax higlighter.

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

I downloaded CodeMirror and put it in one the folder of my app with the name CodeMirror.

在我的应用索引文件中添加了

In my app index file was added:

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

但是，我无法访问该文件codemirror.css和codemirror.js或添加编辑器例如，使用

However, I am not able to access thes files codemirror.css and codemirror.js or add the editor to the panel, for example with

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

我希望有关这个问题的一些指导。

I would appreciate some guidance on this issue.

推荐答案

我支持Tarabass关于包括库文件的建议。但是如果在将ExtJS textarea组件转换为CodeMirror时遇到问题，请参考以下代码：

I support what Tarabass has advised about including library files. But if you face issue in converting ExtJS textarea component to CodeMirror, then please refer following code:

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

I have created a fiddle for you; https://fiddle.sencha.com/#fiddle/te1

这篇关于面板中的CodeMirror编辑器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！