Ext.form.field.HtmlEditor组件编辑器形式示例
日期：2014-05-17 浏览次数：20585 次
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配置项：可以方便分别指定编辑器上方工具栏中按钮的提示信息。
<!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配置项：可以方便分别指定编辑器上方工具栏中按钮的提示信息。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
