EXT-Ext.form.field.HtmlEditor组件编辑器方式示例 _HTML/CSS

EXT--Ext.form.field.HtmlEditor组件编辑器模式示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>HtmlEditor示例</title> 
<link rel="stylesheet" href="ext-4.2.1/resources/css/ext-all.css" /> 
<script type="text/javascript" src="ext-4.2.1/bootstrap.js"></script> 
<script type="text/javascript" src="ext-4.2.1/locale/ext-lang-zh_CN.js"></script> 
<script type="text/javascript"> 
Ext.onReady(function(){ 
Ext.QuickTips.init(); //初始化提示 
Ext.create('Ext.form.Panel',{ 
title:'HtmlEditor示例', 
width:630, 
frame:true, 
renderTo:'form', 
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',text:'背景色'}, 
forecolor:{title:'Font color',text:'前景色'}, 
justifyleft:{title:'Align Text Left',text:'左对齐'}, 
justifycenter:{title:'Center Text',text:'居中对齐'}, 
justifyright:{title:'Align Text Right',text:'右对齐'}, 
insertunorderedlist:{title:'Bullet List',text:'项目符号'}, 
insertorderedlist:{title:'Numbered List',text:'数字编号'}, 
createlink:{title:'Hyperlink',text:'超链接'}, 
sourceedit:{title:'Source Edit',text:'切换源代码编辑模式'} 
} 
//buttonTips配置项，必须同时为所有要显示的按钮提供配置信息，否则编辑器会出异常 
}] 
}); 
}); 
</script> 
</head> 

<body> 
<form id="form" name="form"></form> 
</body> 
</html>

?HtmlEditor组件编辑器是一个简单易用的HTML文本编辑器，提供基本的文本编辑功能，包括设置文本的字体、颜色、对齐方式等常见属性。
与其他表单组件存在的差异：
1.对浏览器的兼容性不同。它在Safari和Firefox浏览器上存在BUG。
2.不支持数据验证，没有提供allowBlank配置项，无法通过简单的配置来对输入信息的内容进行有效验证。
3.数据内容不同。调用Ext.form.field.HtmlEditor的getValue()方法得到的是格式化后的HTML源文件，而非输入的原始文本。
4.buttonTips配置项：可以方便分别指定编辑器上方工具栏中按钮的提示信息。