天天看点

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,如需转载请自行联系原作者

继续阅读