(18)ExtJS之Ext.form.filed.HtmlEditor编辑器
JS文件：
Ext.onReady(function(){
Ext.QuickTips.init();//使用HtmlEditor之前必须初始化提示
Ext.create('Ext.form.Panel',{
title:'Ext.form.field.HtmlEditor示例',
width:630,
frame:true,
renderTo:Ext.getBody(),
bodyPadding:5,
items:[{
fieldLabel:'html字段',
xtype:'htmleditor',
height:150,
width:600,
value:'ExtJS登场',
labelWidth:70,
labelSeparator:':',//分隔符
createLinkText:'创建超链接',//创建连接的提示信息
defaultLinkValue:'http://www.',//链接的默认形式
enableAlignments:true,//启用左中右对齐按钮
enableColors:true,//启用前景色，背景色选择按钮
enableFont:true,//启用字体选择按钮
enableFontSize:true,//启用字体增大和缩小按钮
enableFormat:true,//启用粗体，斜体，下划线按钮
enableLinks:true,//启用创建连接按钮
enableLists:true,//启用列表按钮
enableSourceEdit:true,//启用源代码编辑按钮
fontFamilies:['宋体','隶书','黑体']//字体列表
}]
});
});//以下这段代码文档并没有buttonTips，留于此备用
/*buttonTips:{
bold:{
title:'Bold(Ctrl+B)',
text:'粗体'
},
italic:{
title:'Italic(Ctrl+I)',
text:'斜体'
},
underline:{
title:'Underline(Ctrl+U)',
text:'下划线'
},
increasefontsize:{
title:'Grow Text',
text:'增大字体'
},
decreasefontsize:{
title:'Shrink Text',
text:'缩小字体'
},
backcolor:{
title:'Text Highlight Color',
text:'背景色'
},
forecolor:{
title:'Font Color',
text:'前景色'
},
justifyleft:{
title:'Align Text Left',
text:'左对齐'
},
justifycenter:{
title:'Center Text',
text:'居中对齐'
},
justtifyright:{
title:'Align Text Right',
text:'右对齐'
},
insertunorderedlist:{
title:'Bullet List',
text:'项目符号'
},
insertorderedlist:{
title:'Number List',
text:'数字编号'
},
createlink:{
title:'Hypelink',
text:'超链接'
},
sourceedit:{
title:'Source Edit',
text:'切换源代码编辑模式'
}
}
*/
JSP文件：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'JS1.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!-- extjs的样式文件 -->
<link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css">
<!-- extjs的核心文件 -->
<script type="text/javascript" charset="utf-8" src="js/extjs/ext-all-debug.js"></script>
<!-- 国际化文件 -->
<script type="text/javascript" charset="utf-8" src="js/extjs/ext-lang-zh_CN.js"></script>
<script type="text/javascript" charset="utf-8" src="base/011_form_dateandother.js"></script>
</head>
<body></body>
</html>