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);
        }
    }
}