[Example] Use Redactor in Ext JS window

Redactor
#1

If you want to use Redactor in your own custom manager page (CMP) window, you have to add some configuration code extending MODx.Window. The normal MODx.Window handles the ENTER key in textareas and does not submit the MODx.Window, when this key is pressed in the textarea. To make this possible with Redactor too, you have to add the following configuration to the new component extending MODx.Window:

keys: [{
    key: Ext.EventObject.ENTER,
    fn: function (keyCode, event) {
        var elem = event.getTarget();
        var component = Ext.getCmp(elem.id);
        if (component instanceof Ext.form.TextArea) {
            return component.append('\n');
        } else if (elem.classList.contains('redactor-editor')) {
            var source = elem.parentElement.querySelector('.redactor-source');
            $R('#' + source.id, 'insertion.insertText', '\n');
        } else {
            this.submit();
        }
    },
    scope: this
}],

This code will handle just the ENTER key in the window and create the according action for the textarea and the Redactor fields.

If you need to handle Ace fields, use the following code part (instead of or additional to the redactor else if):

else if (elem.classList.contains('ace_text-input')) {
    var editor = ace.edit(elem.closest('.ace_editor').id);
    return editor.insert('\n');
}
1 Like