Question

我是Ext-Js的新手，我从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上找到它...

Answer 1

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

handler是按钮的选项。

您需要在处理程序中引用编辑器以获取其内容。您可以使用findField方法或使用component query。

从表单中获取

以下是单击保存按钮时如何更新代码以提醒编辑器内容的方法。我添加了第二个保存按钮，以显示组件查询方法。我已在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);

});

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

1 个答案: