下載下傳好了之後發現使用起來好處多多,寫Extjs4.2不卡了,腰不酸了,腿也不疼了,呵呵。。。最主要還有提示。
回歸主題,今天看下線上編輯器控件,控件的屬性如下:
Ext.form.field.HtmlEditor主要配置項
配置項
類型
說明
createLinkText
String
建立連接配接提示框中預設提示資訊
defaultLinkValue
建立連接配接的預設值,預設為http://
defaultValue
編輯器預設值
enableAlignments
Boolean
是否啟用左中右對齊按鈕,預設為true
enableColors
是否啟用前景色、背景色選擇按鈕,預設為true
enableFont
是否啟用選擇字型按鈕,預設為true
enableFontSize
是否啟用增大縮小字型按鈕,預設為true
enableFormat
是否啟用粗體、斜體、下劃線按鈕,預設為true
enableLinks
是否啟用建立連接配接按鈕,預設為true
enableLists
是否啟用清單按鈕,預設為true
enableSourceEdit
是否啟用源代碼編輯按鈕,預設為true
fontFamilies
Array
字型數組
buttonsTips
Object
編輯器工具欄中按鈕的提示資訊配置對象組合,用來自定義工具欄提示消息
看下效果圖:
主要代碼如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<code><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%></code>
<code><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"></code>
<code><</code><code>html</code><code>></code>
<code><</code><code>head</code><code>></code>
<code><</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"Content-Type"</code> <code>content</code><code>=</code><code>"text/html; charset=UTF-8"</code><code>></code>
<code><</code><code>title</code><code>>Hello Extjs4.2</</code><code>title</code><code>></code>
<code><</code><code>link</code> <code>href</code><code>=</code><code>"../../ExtJS4.2/resources/ext-theme-neptune/ext-theme-neptune-all.css"</code> <code>rel</code><code>=</code><code>"stylesheet"</code><code>></code>
<code><</code><code>script</code> <code>src</code><code>=</code><code>"../../ExtJS4.2/ext-all.js"</code><code>></</code><code>script</code><code>></code>
<code><</code><code>script</code> <code>src</code><code>=</code><code>"../../ExtJS4.2/locale/ext-lang-zh_CN.js"</code><code>></</code><code>script</code><code>></code>
<code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>></code>
<code>Ext.onReady(function(){</code>
<code> </code><code>var htmlEditor = new Ext.form.HtmlEditor({</code>
<code> </code><code>fieldLabel:'線上編輯器',</code>
<code> </code><code>labelSeparator: ":",</code>
<code> </code><code>createLinkText: "建立超連結",</code>
<code> </code><code>defaultLinkValue: "http://",</code>
<code> </code><code>enableAlignments: true,</code>
<code> </code><code>enableColors: true,</code>
<code> </code><code>enableFont: true,</code>
<code> </code><code>enableFontSize: true,</code>
<code> </code><code>enableFormat: true,</code>
<code> </code><code>enableLinks: true,</code>
<code> </code><code>enableLists: true,</code>
<code> </code><code>enableSourceEdit: true,</code>
<code> </code><code>fontFamilies: ["宋體", "隸書", "黑體"]</code>
<code> </code><code>});</code>
<code> </code><code>var form = new Ext.form.FormPanel({</code>
<code> </code><code>title: '表單輸入控件示範',</code>
<code> </code><code>width:500,</code>
<code> </code><code>frame: true,</code>
<code> </code><code>items: [htmlEditor],</code>
<code> </code><code>renderTo: 'form'</code>
<code>});</code>
<code></</code><code>script</code><code>></code>
<code></</code><code>head</code><code>></code>
<code><</code><code>body</code><code>></code>
<code><</code><code>h1</code><code>>我的ExtJS4.2學習之路</</code><code>h1</code><code>></code>
<code><</code><code>hr</code> <code>/></code>
<code>作者:束洋洋</code>
<code>開始日期:2013年12月24日 21:39:47</code>
<code><</code><code>h2</code><code>>深入淺出ExtJS之線上編輯器Ext.form.HtmlEditor</</code><code>h2</code><code>></code>
<code><</code><code>div</code> <code>id</code><code>=</code><code>"form"</code><code>></</code><code>div</code><code>></code>
<code></</code><code>body</code><code>></code>
<code></</code><code>html</code><code>></code>
本文轉自shyy8712872 51CTO部落格,原文連結:http://blog.51cto.com/shuyangyang/1406541,如需轉載請自行聯系原作者