1、Ext.form.field.HtmlEditor主要配置項
| 配置項 | 類型 | 說明 |
|---|---|---|
| createLinkText | String | 創建連接提示框中默認提示信息 |
| defaultLinkValue | String | 創建連接的默認值,默認為http:// |
| defaultValue | String | 編輯器默認值 |
| enableAlignments | Boolean | 是否啟用左中右對齊按鈕,默認為true |
| enableColors | Boolean | 是否啟用前景色、背景色選擇按鈕,默認為true |
| enableFont | Boolean | 是否啟用選擇字體按鈕,默認為true |
| enableFontSize | Boolean | 是否啟用增大縮小字體按鈕,默認為true |
| enableFormat | Boolean | 是否啟用粗體、斜體、下划線按鈕,默認為true |
| enableLinks | Boolean | 是否啟用創建連接按鈕,默認為true |
| enableLists | Boolean | 是否啟用列表按鈕,默認為true |
| enableSourceEdit | Boolean | 是否啟用源代碼編輯按鈕,默認為true |
| fontFamilies | Array | 字體數組 |
| buttonsTips | Object | 編輯器工具欄中按鈕的提示信息配置對象組合,用來自定義工具欄提示消息 |
2、Ext.form.field.HtmlEditor示例
代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Ext.form.field.HtmlEditor示例</title> <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script> <script type="text/javascript"> Ext.onReady(function () { Ext.QuickTips.init(); Ext.create("Ext.form.Panel", { title: "Ext.form.field.HtmlEditor示例", width: 600, frame: true, renderTo: Ext.getBody(), bodyPadding: 5, items: [{ fieldLabel: "HTML字段", xtype: "htmleditor", height: 150, width: 580, labelWidth: 70, labelSeparator: ":", createLinkText: "創建超鏈接", defaultLinkValue: "http://", enableAlignments: true, enableColors: true, enableFont: true, enableFontSize: true, enableFormat: true, enableLinks: true, enableLists: true, enableSourceEdit: true, fontFamilies: ["宋體", "隸書", "黑體"] }] }); }); </script> </head> <body> </body> </html>
效果圖:

