Javascript / ExtJS-通过textarea获取Codemirror编辑器

Question

您好stackoverflow社区，

我只是将Codemirror编辑器内置到ExtJSProject中，如下所示：

addCodeMirrorPanel: function() {
   this.getAixmFormarea().add(Ext.widget({
        xtype: 'textarea',
        fieldLabel: 'AIXM',
        autoScroll: true,
        name: 'aixm',
        id: 'codearea',
        width: 800,
        height: 300,
        resizable: true,
        resizeHandles: 's se e',
        listeners: {
            afterrender: function () {
                var textarea = Ext.getCmp('codearea');
                var codemirror = CodeMirror.fromTextArea(textarea.inputEl.dom,{
                    lineNumbers: true,
                    content: '',
                    matchBrackets: true,
                    electricChars:true,
                    autoClearEmptyLines: true,
                    extraKeys: {"Enter": "newlineAndIndentContinueComment"}
                });
            }

        }
    }));

}

现在，我想做的是从另一个Controller函数访问codemirror编辑器，而我不确定如何做到这一点。 在codemirror手册中未指定getinstance（），geteditorbyID（）或类似方法，我似乎也无法从现在隐藏的文本字段中访问它。

Answer 1

那么为什么在创建实例后就丢弃它呢？ 也许您可以简单地将其存储在小部件上？

this.codeMirror = CodeMirror.fromTextArea(...);

Answer 2

我遇到了类似的问题，最初使用的是plalx提供的答案。 但是，如果您需要动态创建codemirror的实例， codemirror可能会很棘手。

我使用以下代码并在父组件上创建了一个方法getValue() ， setValue()和getCodeMirror()

因此，在使用中，您可以获取类似于以下内容的codemirror实例：

var codeMirror = Ext.ComponentQuery.query('#parentFld')[0].getCodeMirror();

这是组件代码：

{
    fieldLabel: 'Code Instance',
    itemId: 'parentFld',
    border: 1,
    html: '<textarea></textarea>',
    /* Overriding getValue function of the field to pull value from the codemirror text area*/
    getValue: function (value) {
        return this.getCodeMirror().getValue();
    },
    /*Overriding setValue function of the field to put the value in the code mirror window*/
    setValue: function (value) {
        this.getCodeMirror().setValue(value);
    },
    getCodeMirror: function () {
        return this.getEl().query('.CodeMirror')[0].CodeMirror;
    },
    listeners: {
        //on render of the component convert the textarea into a codemirror.
        render: function () {
            var codeMirror = CodeMirror.fromTextArea(this.getEl().down('textarea').dom, {
                mode: { 
                  name: "text/x-sql", globalVars: true 
                },
                //theme: theme,
                lineNumbers: true,
                readOnly: false,
                extraKeys: {"Ctrl-Space":"autocomplete"}
            });
            codeMirror.setSize(700, 370);
        }
    }
}