Ext表单组件之HtmlEditor

最新推荐文章于 2023-01-11 19:30:00 发布

beyond1993

最新推荐文章于 2023-01-11 19:30:00 发布

阅读量186

点赞数

分类专栏： Extjs 文章标签： Extjs javascript prototype HtmlEditor Ext ViewUI

Extjs 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

[size=large]所有设置都是按部就班，没有特别的地方，基本就只是功能的开启与关闭
createLinkText：‘’表示创建超链接按钮的提示信息，在这之前别忘记了把
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'title';
加上，否则提示信息会看不到效果！
还有一个选项就是buttonTips,其接受一个对象
sourceedit:{title:'源代码编辑',text:'切换源代码编辑模式'}
具体实现看代码，[/size]

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都行！

beyond1993

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext表单组件之HtmlEditor

[size=large]所有设置都是按部就班，没有特别的地方，基本就只是功能的开启与关闭createLinkText：‘’表示创建超链接按钮的提示信息，在这之前别忘记了把Ext.QuickTips.init();Ext.form.Field.prototype.msgTarget = 'title';加上，否则提示信息会看不到效果！还有一个选项就是buttonTips,其接受一...
复制链接

扫一扫