Ext表单组件之HtmlEditor
所有设置都是按部就班，没有特别的地方，基本就只是功能的开启与关闭
createLinkText：‘’表示创建超链接按钮的提示信息，在这之前别忘记了把
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'title';
加上，否则提示信息会看不到效果！
还有一个选项就是buttonTips,其接受一个对象
sourceedit:{title:'源代码编辑',text:'切换源代码编辑模式'}
具体实现看代码，
htmleditor.html
htmleditor.js
这么简单的配置，看以下就差不多了，用的时候再查API都行！
createLinkText：‘’表示创建超链接按钮的提示信息，在这之前别忘记了把
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'title';
加上，否则提示信息会看不到效果！
还有一个选项就是buttonTips,其接受一个对象
sourceedit:{title:'源代码编辑',text:'切换源代码编辑模式'}
具体实现看代码，
htmleditor.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>htmleditor.html</title>
<style type="text/css">
body{background-color:#777777}
#form-he{width: 700px;margin-left: auto;margin-right: auto;}
</style>
<link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../Ext/ext-all.js"></script>
<script type="text/javascript" src="htmleditor.js"></script>
</head>
<body>
<div id="form-he"></div>
</body>
</html>
htmleditor.js
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'title';
var form = new Ext.FormPanel({
title : 'HtmlEditor应用',
width : 600,
autoHeight : true,
renderTo : 'form-he',
bodyStyle : "padding:2px",
border : false,
frame : true,
items : [{
autoHeight : true,
xtype : 'fieldset',
collapsible :true,
collapsed :false,
layout : 'form',
title:'复选框',
items:[{
xtype:'htmleditor',
name:'content',
hideLabel :true,
anchor : '100%',
createLinkText :'创建超链接',//创建超链接的提示信息
defaultLinkValue :'http://www.',//默认连接值，默认值为http://
enableAlignments :true,//是否启用对齐按钮，包括左中右三个按钮
enableColors :true,//是否启用前景色背景色按钮，默认为true
enableFont :true,//是否启用字体选择按钮 默认为true
enableFontSize :true,//是否启用字体加大缩小按钮
enableFormat :true,//是否启用加粗斜体下划线按钮
enableLists :true,//是否启用列表按钮t
enableSourceEdit :true,//是否启用代码编辑按钮
fontFamilies :['宋体','隶书','黑体'],
buttonTips :{
bold : {//用来设置按钮的提示信息,可以为每个按钮设置,这里做俩个演示其他的去试下就知道了
title: '粗体 (Ctrl+B)',
text: '设置字体样式为粗体.'
},
italic : {
title: '斜体 (Ctrl+I)',
text: '设置字体样式为斜体.'
},
sourceedit:{
title:'源代码编辑',
text:'切换源代码编辑模式'
}
}
}]
}],
buttons : [{
text : '提交',
scope : this,
handler : function() {
alert(Ext.encode(form.form.getValues()));
}
}, {
text : '重置'
}]
})
})
这么简单的配置，看以下就差不多了，用的时候再查API都行！