天天看點

ExtJS4.2學習(19)線上編輯器Ext.form.HtmlEditor

下載下傳好了之後發現使用起來好處多多,寫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>&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;</code>

<code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;</code>

<code>&lt;</code><code>html</code><code>&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>&lt;</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>&gt;</code>

<code>&lt;</code><code>title</code><code>&gt;Hello Extjs4.2&lt;/</code><code>title</code><code>&gt;</code>

<code>&lt;</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>&gt;</code>

<code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"../../ExtJS4.2/ext-all.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"../../ExtJS4.2/locale/ext-lang-zh_CN.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>&gt;</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>&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>&lt;</code><code>h1</code><code>&gt;我的ExtJS4.2學習之路&lt;/</code><code>h1</code><code>&gt;</code>

<code>&lt;</code><code>hr</code> <code>/&gt;</code>

<code>作者:束洋洋</code>

<code>開始日期:2013年12月24日 21:39:47</code>

<code>&lt;</code><code>h2</code><code>&gt;深入淺出ExtJS之線上編輯器Ext.form.HtmlEditor&lt;/</code><code>h2</code><code>&gt;</code>

<code>&lt;</code><code>div</code> <code>id</code><code>=</code><code>"form"</code><code>&gt;&lt;/</code><code>div</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

本文轉自shyy8712872 51CTO部落格,原文連結:http://blog.51cto.com/shuyangyang/1406541,如需轉載請自行聯系原作者

繼續閱讀