Javascript 获取编辑器内容-Ext Js html编辑器

我是ExtJS新手，我从github获得了一个带有一些插件的html编辑器，现在我在编辑器上有了一个按钮，可以弹出一个包含文本区域内容的警报框

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',
            fieldLabel:     'Text editor',
            height:         300,
            plugins: [
                Ext.create('Ext.ux.form.plugin.HtmlEditor',{
                    enableAll:  true
                    ,enableMultipleToolbars: true
                })
            ],
            anchor:         '100%'
        }],

        buttons: [{
            text: 'Save'
        },{
            text: 'Cancel'
        }]
    });

    top.render(document.body);

});

我知道我应该补充一下

handler:function(){alert(someextjscodehere)}

但是我不知道是什么函数返回它，我也无法在google上找到它…

您需要使用编辑器的方法来检索它的内容

是按钮的一个选项

您需要在处理程序中引用编辑器，以获取其内容。您可以使用方法从表单中获取，也可以使用

下面介绍如何更新代码，以便在单击“保存”按钮时提醒编辑器的内容。我添加了第二个保存按钮，向您展示组件查询方法。我已经试过了

---

你确定你需要这个插件吗？基本的HtmlEditor存在于Ext中，插件只是添加了一些功能。是的，我确定。原始编辑器没有table、undo、redo…functions.Oops。当然，你可以重新启用你的插件，我已经对它进行了注释，以便让你的代码在JSFIDLE中工作^^^享受学习Ext的乐趣！

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

});