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

不知道大家发觉这样的问题没，以前写Extjs3.X的时候，Eclipse在复制粘贴写代码的时候一点不卡，在4.2的时候，用eclipse写就会经常卡死的现象。下午研究了一下午，我可不想在写代码的时候一直被卡死，我就找到了新的IDE工具intellij idea (关于此工具的介绍可以看我这篇文章http://www.shuyangyang.com.cn/jishuliangongfang/Javabiancheng/2013-12-04/186.html)，

下载好了之后发现使用起来好处多多，写Extjs4.2不卡了，腰不酸了，腿也不疼了，呵呵。。。最主要还有提示。

QQ截图20131224230530.jpg

回归主题，今天看下在线编辑器控件，控件的属性如下：

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	编辑器工具栏中按钮的提示信息配置对象组合，用来自定义工具栏提示消息

看下效果图：

QQ截图20131224230530.jpg

主要代码如下：

 
         <%@ 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 
         >