ExtJS4.2学习(19)在线编辑器Ext.form.HtmlEditor
不知道大家发觉这样的问题没，以前写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 | 编辑器工具栏中按钮的提示信息配置对象组合，用来自定义工具栏提示消息 |
看下效果图：
主要代码如下：
<%@ 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>
连载中，请大家继续关注！本文出自我的个人网站思考者日记网