下载好了之后发现使用起来好处多多,写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,如需转载请自行联系原作者