Using Javascript and ExtJS to retrieve the Codemirror Editor using a textarea

Question

Using Javascript and ExtJS to retrieve the Codemirror Editor using a textarea

Hello to the wonderful stackoverflow community,

I recently incorporated a Codemirror Editor into my ExtJSProject like this:

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

        }
    }));

}

Now, my goal is to access the codemirror editor from a different Controller function, but I'm unsure of the proper method to do so. There doesn't seem to be a getInstance() or getEditorByID() function specified in the codemirror manual, and accessing it from the hidden textfield is proving to be a challenge.

javascript extjs codemirror

Answer 1

Answer №1

Have you considered keeping the instance you create instead of discarding it right away? You might want to store it on the widget for future use.

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

Answer 2

Have you considered keeping the instance you create instead of discarding it right away? You might want to store it on the widget for future use.

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

Answer 3

Answer №2

Encountering a similar issue, I initially followed the solution provided by plalx. However, when it comes to dynamically creating instances of codemirror, things can get a bit tricky.

To address this, I came up with the following code and established a method on the parent component to handle getValue(), setValue(), and getCodeMirror().

Therefore, you can access the codemirror instance like this:

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

Here's the component code snippet:

{
    fieldLabel: 'Code Instance',
    itemId: 'parentFld',
    border: 1,
    html: '<textarea></textarea>',
    /* Overriding getValue function of the field to retrieve value from the codemirror text area */
    getValue: function (value) {
        return this.getCodeMirror().getValue();
    },
    /* Overriding setValue function of the field to set 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);
        }
    }
}

Answer 4

Encountering a similar issue, I initially followed the solution provided by plalx. However, when it comes to dynamically creating instances of codemirror, things can get a bit tricky.

To address this, I came up with the following code and established a method on the parent component to handle getValue(), setValue(), and getCodeMirror().

Therefore, you can access the codemirror instance like this:

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

Here's the component code snippet:

{
    fieldLabel: 'Code Instance',
    itemId: 'parentFld',
    border: 1,
    html: '<textarea></textarea>',
    /* Overriding getValue function of the field to retrieve value from the codemirror text area */
    getValue: function (value) {
        return this.getCodeMirror().getValue();
    },
    /* Overriding setValue function of the field to set 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);
        }
    }
}

Using Javascript and ExtJS to retrieve the Codemirror Editor using a textarea

Answer №1

Answer №2

Similar questions

Struggling to replicate the Quad from .obj file using only Face3

Is it possible to dynamically pass a component to a generic component in React?

JQuery requests functioning flawlessly on one system while encountering issues on other systems

Storing new li and ul elements to the database by utilizing an array for dynamic saving

Unresolved dependencies causing a rollup error

What is the process for updating my API data with information submitted through a form?

What is the process for creating two columns with an input box beneath them?

Ways to determine if a string or HTML contains repeated consecutive elements

Arrange the items that are missing from Array B to be located at the bottom of Array A, organized in a file tree structure

Can you show me a way to display a dynamically created array component on an Angular2 template html?

Issue encountered during the creation of a Nuxt3 project. The download of the template from the registry was

Trigger the activation of an input field upon clicking an image labeled "edit"

Utilizing a React Hook to set data by creating a pure function that incorporates previous data using a thorough deep comparison methodology

Error: Attempting to use the 'append' method on an object that does not support the FormData interface

Steps for setting the value of a textbox within a bootstrap popover

Are extra parameters in the URL causing issues with AngularJS routing?

Docz: Utilizing Typescript definitions for props rendering beyond just interfaces

Ways to activate the enter key

Having trouble creating a unit test for exporting to CSV in Angular

Deselect an item from a three.js scene by clicking on it