獲取編輯內容 - 分機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); 

});