获取编辑内容 - 分机JS的HTML编辑器

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

，但我不知道函数返回它，我也可以找到它的谷歌...

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

});