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

Question

我是Ext的新手，我从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)}

但是我不知道是什么函数返回它，也不知道我在谷歌上找到它.

Answer 1

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

handler是按钮的一个选项。

您将需要对处理程序中的编辑器进行引用，以获取其内容。您可以使用findField方法或组件查询从表单中获得它。

下面是如何更新代码，以便在单击“保存”按钮时通知编辑器的内容。我添加了第二个保存按钮来显示组件查询方法。我已经在这把小提琴上测试过了。

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

});