`
keepwork
  • 浏览: 330182 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

EXT--Ext.form.field.HtmlEditor组件编辑器模式示例

    博客分类:
  • EXT
 
阅读更多
<!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配置项:可以方便分别指定编辑器上方工具栏中按钮的提示信息。

开发者博客www.developsearch.com

分享到:
评论
1 楼 jiiiang400 2015-04-23  
sdfgs

相关推荐

    EXT.form组件

    8. `htmleditor`:`Ext.form.HtmlEditor`是一个富文本编辑器,用户可以编辑HTML内容,包括字体、颜色、图片等。 9. `numberfield`:`Ext.form.NumberField`继承自`Ext.form.TextField`,专用于处理数字输入。它提供...

    ExtJS-3.4.0系列目录

    - `Ext.form.field.HtmlEditor`:富文本编辑器。 - `Ext.form.field.Display`:只读文本字段。 - `Ext.form.Label`:标签字段,用于显示文本。 - `Ext.form.FieldSet`:字段集,用于组织和分组表单元素。 5. **...

    ecplise html编辑器tk.eclipse.plugin.htmleditor_2.2.0.jar

    ecplise html编辑器tk.eclipse.plugin.htmleditor_2.2.0.jar 配合GEF插件能在eclipse里识别html的标签来方便编辑html页面。tk.eclipse.plugin.htmleditor_2.2.0.jar文件直接复制到eclipse\plugins里面即可

    GEF_ALL+tk.eclipse.plugin.htmleditor_2.2.0.jar

    1.解压后得到GEF-ALL-3.4.1.zip和tk.eclipse.plugin.htmleditor_2.2.0.jar 2.安装GEF 解压GEF-ALL-3.4.1.zip,得到一个eclipse文件夹,打开可看到: 下面有三个文件夹:features,plugins,readme 分别拷贝上面...

    Ext组件描述,各个组件含义

    - **功能描述**:Editor 是一个通用编辑器组件,可以用来编辑表单字段或其他数据。 - **主要用途**:用于编辑现有数据,例如在表格单元格内进行编辑。 **2.5 Editor Grid Panel (Ext.grid.EditorGridPanel)** - **...

    mzExt:Extjs 4.x的插件和扩展

    执照:麻省理工学院演示:论坛:Ext.ux.form.field.UploadFileField 执照:麻省理工学院演示:论坛:Ext.ux.form.field.ImageFileField 执照:麻省理工学院演示:论坛:Ext.ux.form.plugin.HtmlEditor 执照:麻省...

    tk.eclipse.plugin.htmleditor_2.1.0

    tk.eclipse.plugin.htmleditor_2.1.0

    Ext Js权威指南(.zip.001

    7.4.3 数据模型的骨架——字段:ext.data.field / 330 7.4.4 数据集:ext.util.abstractmixedcollection与ext.util.mixedcollection / 330 7.4.5 数据验证及错误处理:ext.data.validations与ext.data.errors / ...

    ExtJs组件类的对应表

    9. **`htmleditor`** - `Ext.form.HtmlEditor`,HTML编辑器,用于编辑富文本。 10. **`label`** - `Ext.form.Label`,标签组件,用于为表单字段提供描述。 11. **`numberfield`** - `Ext.form.NumberField`,...

    Lion.Data.Library.HtmlEditor v2.0 Demo

    Lion.Data.Library.HtmlEditor v2.0 是一个专为ASP.Net平台设计的高效、易用的富文本编辑器组件。本篇文章将详细介绍该编辑器的特性和使用方法,帮助开发者更好地理解和应用这个强大的工具。 首先,Lion.Data....

    Ext Htmleditor 支持上传图片

    Ext HTMLEditor是一款基于Ext JS库的富文本编辑器组件,它允许用户在网页上进行类似于Word的文本编辑操作,包括格式化、插入链接、图片等。本文将深入讲解如何利用Ext HTMLEditor实现图片上传功能,以及相关知识点。...

    ExtJs_xtype一览

    - `htmleditor`:`Ext.form.HtmlEditor`,HTML编辑器组件。 - `numberfield`:`Ext.form.NumberField`,数字输入框。 - `radio`:`Ext.form.Radio`,单选按钮。 - `textarea`:`Ext.form.TextArea`,多行文本...

    tk.eclipse.plugin.htmleditor_2.2.0.jar,eclipse插件

    tk.eclipse.plugin.htmleditor_2.2.0.jar,eclipse插件

    ext-2.3.0+CKEditor 3.0.1+ckfinder_asp_1.4配置详解及工程源码

    //Ext.form.Field.prototype.msgTarget = 'side'; var bd = Ext.getBody(); /* * ================ Form 5 ======================= */ bd.createChild({tag: 'h2', html: 'Form 5 - ... and forms can ...

    ExtJSWeb应用程序开发指南(第2版)

    4.1.16 Ext.form.field.HtmlEditor编辑器字段 4.1.17 Ext.form.field.Display只读文本字段 4.1.18 Ext.form.Label标签字段 4.1.19 Ext.form.FieldSet字段集 4.1.20 Ext.form.FieldContainer容器字段 4.1.21 Ext...

    vuehtmleditor实现HTML编辑器的Vuejs组件

    主要文件可能包括`src/`目录下的`index.vue`(主组件)、`editor.js`(富文本编辑器核心功能)、`style.css`(样式文件)等。通过阅读这些源码,开发者可以更深入地了解组件的工作原理,甚至进行二次开发和扩展。 #...

    Lion.Data.Library.HtmlEditor v2.0(源码和实例)

    《Lion.Data.Library.HtmlEditor v2.0:深入解析C#中的富文本编辑器开发》 在IT领域,尤其是在Web应用开发中,富文本编辑器(HTML Editor)是不可或缺的一部分,它允许用户以类似Word的方式编辑和格式化文本。本文...

    Change-the-text-and-style.zip_style

    5. **富文本处理**:如果需要处理更复杂的文本格式,如HTML或Markdown,可以使用`WebView`组件(JavaFX)加载HTML内容,或者使用`HTMLEditor`(JavaFX)进行编辑。Swing中的`JEditorPane`可以显示和编辑HTML文本。 ...

    EXT 表单验证EXT 表单验证

    9. **插件和扩展**:EXT社区提供了许多表单验证相关的插件和扩展,如`Ext.form.field.Picker`,用于下拉选择验证,以及`Ext.form.field.HtmlEditor`,用于富文本编辑器的验证。 10. **实际应用**:在实际项目中,...

Global site tag (gtag.js) - Google Analytics