不知道大家发觉这样的问题没，以前写Extjs3.X的时候，Eclipse在复制粘贴写代码的时候一点不卡，在4.2的时候，用eclipse写就会经常卡死的现象。下午研究了一下午，我可不想在写代码的时候一直被卡死，我就找到了新的IDE工具intellij idea (关于此工具的介绍可以看我这篇文章http://www.shuyangyang.com.cn/jishuliangongfang/Javabiancheng/2013-12-04/186.html)，
下载好了之后发现使用起来好处多多，写Extjs4.2不卡了，腰不酸了，腿也不疼了，呵呵。。。最主要还有提示。
回归主题，今天看下在线编辑器控件，控件的属性如下：
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 | 编辑器工具栏中按钮的提示信息配置对象组合，用来自定义工具栏提示消息 |
看下效果图：
主要代码如下：
|
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
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<
html
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=UTF-8"
>
<
title
>Hello Extjs4.2</
title
>
<
link
href
=
"../../ExtJS4.2/resources/ext-theme-neptune/ext-theme-neptune-all.css"
rel
=
"stylesheet"
>
<
script
src
=
"../../ExtJS4.2/ext-all.js"
></
script
>
<
script
src
=
"../../ExtJS4.2/locale/ext-lang-zh_CN.js"
></
script
>
<
script
type
=
"text/javascript"
>
Ext.onReady(function(){
var htmlEditor = new Ext.form.HtmlEditor({
fieldLabel:'在线编辑器',
labelSeparator: "：",
createLinkText: "创建超链接",
defaultLinkValue: "http://",
enableAlignments: true,
enableColors: true,
enableFont: true,
enableFontSize: true,
enableFormat: true,
enableLinks: true,
enableLists: true,
enableSourceEdit: true,
fontFamilies: ["宋体", "隶书", "黑体"]
});
var form = new Ext.form.FormPanel({
title: '表单输入控件演示',
width:500,
frame: true,
items: [htmlEditor],
renderTo: 'form'
});
});
</
script
>
</
head
>
<
body
>
<
h1
>我的ExtJS4.2学习之路</
h1
>
<
hr
/>
作者：束洋洋
开始日期：2013年12月24日 21:39:47
<
h2
>深入浅出ExtJS之在线编辑器Ext.form.HtmlEditor</
h2
>
<
div
id
=
"form"
></
div
>
</
body
>
</
html
>
|
本文转自shyy8712872 51CTO博客，原文链接：http://blog.51cto.com/shuyangyang/1406541，如需转载请自行联系原作者
