Getting the editor content - Ext-Js html editor

Question

You need to use the getValue method of the editor to retrieve its content.

handler is an option of the button.

You'll need a reference to the editor in the handler, to get its content. You can get it from the form with the findField method, or with a component query.

Here's how to update your code to alert the content of the editor when clicking the save button. I've added a second save button to show you the component query method. I've tested it in this fiddle.

Ext.onReady(function() {
    Ext.tip.QuickTipManager.init();

    var top = Ext.create('Ext.form.Panel', {
        frame:true,
        title:          'HtmlEditor plugins',
        bodyStyle:      'padding:5px 5px 0',
        //width:          300,
        fieldDefaults: {
            labelAlign:     'top',
            msgTarget:      'side'
        },

        items: [{
            xtype:          'htmleditor',
            name: 'htmlContent', // add a name to retrieve the field without ambiguity
            fieldLabel:     'Text editor',
            height:         300,
            /*            plugins: [
                    Ext.create('Ext.ux.form.plugin.HtmlEditor',{
                        enableAll:  true
                        ,enableMultipleToolbars: true
                    })
                ],
    */            anchor:         '100%'
        }],

        buttons: [{
            text: 'Save'
            ,handler: function() {
                var editor = top.getForm().findField('htmlContent');
                alert(editor.getValue());
            }
        },{
            text: 'Save 2'
            ,handler: function() {
                // You can grab the editor with a component query too
                var editor = top.down('htmleditor');
                alert(editor.getValue());
            }
        },{
            text: 'Cancel'
        }]
    });

    top.render(document.body);

});