不知道大家发觉这样的问题没，以前写Extjs3.X的时候，Eclipse在复制粘贴写代码的时候一点不卡，在4.2的时候，用eclipse写就会经常卡死的现象。下午研究了一下午，我可不想在写代码的时候一直被卡死，我就找到了新的IDE工具intellij idea (关于此工具的介绍可以看我这篇文章http://www.shuyangyang.com.cn/jishuliangongfang/Javabiancheng/2013-12-04/186.html)，

下载好了之后发现使用起来好处多多，写Extjs4.2不卡了，腰不酸了，腿也不疼了，呵呵。。。最主要还有提示。

QQ截图20131224230530.jpg

回归主题，今天看下在线编辑器控件，控件的属性如下：

Ext.form.field.HtmlEditor主要配置项

配置项类型说明
createLinkTextString创建连接提示框中默认提示信息
defaultLinkValueString创建连接的默认值，默认为http://
defaultValueString编辑器默认值
enableAlignmentsBoolean是否启用左中右对齐按钮，默认为true
enableColorsBoolean是否启用前景色、背景色选择按钮，默认为true
enableFontBoolean是否启用选择字体按钮，默认为true
enableFontSizeBoolean是否启用增大缩小字体按钮，默认为true
enableFormatBoolean是否启用粗体、斜体、下划线按钮，默认为true
enableLinksBoolean是否启用创建连接按钮，默认为true
enableListsBoolean是否启用列表按钮，默认为true
enableSourceEditBoolean是否启用源代码编辑按钮，默认为true
fontFamiliesArray字体数组
buttonsTipsObject编辑器工具栏中按钮的提示信息配置对象组合，用来自定义工具栏提示消息

看下效果图：

QQ截图20131224230530.jpg

主要代码如下：

<%@ 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>

连载中，请大家继续关注！本文出自我的个人网站思考者日记网