ExtJS4.2学习(19)在线编辑器Ext.form.HtmlEditor



不知道大家发觉这样的问题没,以前写Extjs3.X的时候,Eclipse在复制粘贴写代码的时候一点不卡,在4.2的时候,用eclipse写就会经常卡死的现象。下午研究了一下午,我可不想在写代码的时候一直被卡死,我就找到了新的IDE工具intellij idea (关于此工具的介绍可以看我这篇文章点我查看),下载好了之后发现使用起来好处多多,写Extjs4.2不卡了,腰不酸了,腿也不疼了,呵呵。。。最主要还有提示。Hpe思考者日记网-束洋洋个人博客

QQ截图20131224230530.jpgHpe思考者日记网-束洋洋个人博客

回归主题,今天看下在线编辑器控件,控件的属性如下:Hpe思考者日记网-束洋洋个人博客

Ext.form.field.HtmlEditor主要配置项
配置项 类型 说明
createLinkText String 创建连接提示框中默认提示信息
defaultLinkValue String 创建连接的默认值,默认为http://
defaultValue String 编辑器默认值
enableAlignments Boolean 是否启用左中右对齐按钮,默认为true
enableColors Boolean 是否启用前景色、背景色选择按钮,默认为true
enableFont Boolean 是否启用选择字体按钮,默认为true
enableFontSize Boolean 是否启用增大缩小字体按钮,默认为true
enableFormat Boolean 是否启用粗体、斜体、下划线按钮,默认为true
enableLinks Boolean 是否启用创建连接按钮,默认为true
enableLists Boolean 是否启用列表按钮,默认为true
enableSourceEdit Boolean 是否启用源代码编辑按钮,默认为true
fontFamilies Array 字体数组
buttonsTips Object 编辑器工具栏中按钮的提示信息配置对象组合,用来自定义工具栏提示消息

看下效果图:Hpe思考者日记网-束洋洋个人博客

QQ截图20131224230530.jpgHpe思考者日记网-束洋洋个人博客

主要代码如下:Hpe思考者日记网-束洋洋个人博客

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Hello Extjs4.2</title>  
<link href="../../ExtJS4.2/resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet">  
<script src="../../ExtJS4.2/ext-all.js"></script>  
<script src="../../ExtJS4.2/locale/ext-lang-zh_CN.js"></script>  
<script type="text/javascript">  
Ext.onReady(function(){  
    var htmlEditor = new Ext.form.HtmlEditor({  
        fieldLabel:'在线编辑器',  
        labelSeparator: ":",  
        createLinkText: "创建超链接",  
        defaultLinkValue: "http://",  
        enableAlignments: true,  
        enableColors: true,  
        enableFont: true,  
        enableFontSize: true,  
        enableFormat: true,  
        enableLinks: true,  
        enableLists: true,  
        enableSourceEdit: true,  
        fontFamilies: ["宋体", "隶书", "黑体"]  
    });  
    var form = new Ext.form.FormPanel({  
        title: '表单输入控件演示',  
        width:500,  
        frame: true,  
        items: [htmlEditor],  
        renderTo: 'form'  
    });  
});  
</script>  
</head>  
<body>  
<h1>我的ExtJS4.2学习之路</h1>  
<hr />  
作者:束洋洋  
开始日期:2013年12月24日 21:39:47  
<h2>深入浅出ExtJS之在线编辑器Ext.form.HtmlEditor</h2>  
<div id="form"></div>  
</body>  
</html>  

 Hpe思考者日记网-束洋洋个人博客

 Hpe思考者日记网-束洋洋个人博客

 Hpe思考者日记网-束洋洋个人博客

ExtJS4.2全部章节汇总目录


 Hpe思考者日记网-束洋洋个人博客

ExtJS4.2学习(一)Ext自定义类Hpe思考者日记网-束洋洋个人博客

ExtJS4.2学习(二)Ext统一组件模型Hpe思考者日记网-束洋洋个人博客

ExtJS4.2学习(三)Grid表格Hpe思考者日记网-束洋洋个人博客

ExtJS4.2学习(四)Grid表格中文排序问题Hpe思考者日记网-束洋洋个人博客

ExtJS4.2学习(五)表格渲染与复选框Hpe思考者日记网-束洋洋个人博客

ExtJS4.2学习(六)表格分页与通过后台脚本获得分页数据Hpe思考者日记网-束洋洋个人博客

ExtJS4.2学习(七)EditorGrid可编辑表格Hpe思考者日记网-束洋洋个人博客

ExtJS4.2学习(八)表格限制输入数据的类型Hpe思考者日记网-束洋洋个人博客

ExtJS4.2学习(九)属性表格控件PropertyGridHpe思考者日记网-束洋洋个人博客

ExtJS4.2学习(10)分组表格控件--GroupingGridHpe思考者日记网-束洋洋个人博客

ExtJS4.2学习(11)可拖放的表格Hpe思考者日记网-束洋洋个人博客

ExtJS4.2学习(12)基于表格的右键菜单Hpe思考者日记网-束洋洋个人博客

ExtJS4.2学习(13)基于表格的扩展插件---rowEditingHpe思考者日记网-束洋洋个人博客

ExtJS4.2学习(14)基于表格的扩展插件(2)Hpe思考者日记网-束洋洋个人博客

ExtJS4.2学习(15)树形表格Hpe思考者日记网-束洋洋个人博客

 ExtJS4.2学习(16)制作表单Hpe思考者日记网-束洋洋个人博客

ExtJS4.2学习(17)表单基本输入控件Ext.form.FieldHpe思考者日记网-束洋洋个人博客

 ExtJS4.2学习(18)时间控件Hpe思考者日记网-束洋洋个人博客

 ExtJS4.2学习(19)在线编辑器Ext.form.HtmlEditorHpe思考者日记网-束洋洋个人博客

ExtJS4.2学习(20)动态数据表格之前几章总结篇1 Hpe思考者日记网-束洋洋个人博客

 ExtJS4.2学习(21)动态菜单与表格数据展示操作总结篇2Hpe思考者日记网-束洋洋个人博客

ExtJS4.2学习(22)登录界面Hpe思考者日记网-束洋洋个人博客

ExtJS4.2学习(23)textFiled后追加按钮Hpe思考者日记网-束洋洋个人博客

ExtJS4.2学习(24)TreeStore使用详解Hpe思考者日记网-束洋洋个人博客

ExtJS4.2学习(25)终结篇,实战项目Hpe思考者日记网-束洋洋个人博客

 

(转载本站文章请注明作者和出处 思考者日记网|束洋洋个人博客 ,请勿用于任何商业用途)

『访问 思考者日记网404页面 寻找遗失儿童』

告知
  •     本站90%以上文章均属原创,部分转载已加上原作者出处。 如需转载本站文章请您务必保留本站出处!
  •     打广告评论者请自重,请为广大网友提供一个健康干净的网络空间。
  • 感谢主机屋提供网站空间;
  • 感谢万网阿里云提供域名解析;
  • 感谢EmpireCMS提供CMS系统;
  • 感谢bootstrap展示本站前端页面;
  • 感谢Glyphicons Halflings提供字体;
  • 感谢大家一直以来对本站的喜爱,感谢大家!
近期文章 建议与反馈