使用Javascript/ExtJS的 - 獲得Codemirror編輯器通過textarea的

你好計算器社區，使用Javascript/ExtJS的 - 獲得Codemirror編輯器通過textarea的

我剛剛建立了一個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"} 
       }); 
      } 

     } 
    }));

}

現在我想做的事是從不同的控制器功能訪問codemirror編輯器，我不太確定如何做到這一點。沒有getinstance（），geteditorbyID（）或類似的方法在codemirror手冊中指定，我似乎無法從現在隱藏的文本字段訪問它。

來源

2013-12-21 RagingPixels

那你爲什麼在創建它之後丟棄實例？也許你可以簡單地將它存儲在小部件上？

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

來源

2013-12-21 17:36:51 plalx

謝謝！我不認爲這會像綁定到組件那樣容易。 – RagingPixels

我遇到了類似的問題，最初是使用plalx提供的答案。但是，如果您需要動態創建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); 
     } 
    } 
}

來源

2014-08-27 15:24:27 weeksdev

使用Javascript/ExtJS的 - 獲得Codemirror編輯器通過textarea的

回答

相關問題