- 浏览: 33269 次
- 性别:
- 来自: 广州
最新评论
<!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配置项:可以方便分别指定编辑器上方工具栏中按钮的提示信息。
<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配置项:可以方便分别指定编辑器上方工具栏中按钮的提示信息。
发表评论
-
Ext.data.TreeStore 分级异步加载树节点示例
2013-07-10 15:36 2068Ext.data.TreeStore远程加载树节点有两种常用方 ... -
Ext.Ajax.request提交JSON数据
2013-07-10 09:29 1356JSON作为轻量级的数据传输格式,在很多时候可以作为XML文件 ... -
Ext.Ajax.request提交XML数据示例
2013-07-09 16:51 938服务器端:loginServerXml.jsp 在lib下要有 ... -
Ext.Ajax.request异步提交表单示例
2013-07-09 16:10 1047服务器端代码:loginServer.jsp <%@ ... -
树形面板Ext.tree.Panel
2013-07-05 15:19 644<!DOCTYPE html PUBLIC " ... -
relayEvents传播分发事件
2013-07-04 14:17 693<!DOCTYPE html PUBLIC " ... -
Extjs自定义事件
2013-07-04 10:54 434<!DOCTYPE html PUBLIC " ... -
改变文档样式风格示例
2013-07-04 10:55 772<!DOCTYPE html PUBLIC " ... -
ExtJS事件绑定方式示例
2013-07-04 10:55 672<!DOCTYPE html PUBLIC " ... -
Ext.util.JSON编码和解码JSON对象
2013-07-03 15:27 941<script type="text/java ... -
Ext.util.Format提供的常用格式化方法
2013-07-03 14:57 1326<!DOCTYPE html PUBLIC " ... -
Ext.util.ClickRepeater 事件的配置和触发
2013-07-03 11:55 745Ext.util.ClickRepeater 继承Ext.ut ... -
样式表的创建和规则获取示例
2013-07-03 10:44 512<!DOCTYPE html PUBLIC " ... -
Ext.KeyNav为元素提供简单的按键处理方法示例
2013-07-03 09:46 843<!DOCTYPE html PUBLIC " ... -
Ext常用函数
2013-07-01 16:42 625函数一:Ext.onReady() Ext的Dom都是动态生成 ... -
水平盒布局HBox
2013-07-01 15:43 480<!DOCTYPE html PUBLIC " ... -
表格布局
2013-07-01 15:18 519<!DOCTYPE html PUBLIC " ... -
Ext.layout.container.Column布局
2013-07-01 15:18 743<script type="text/java ... -
Absolute绝对位置布局示例
2013-07-01 14:35 395Ext.layout.container.Absolute对应 ... -
Card 卡片式布局
2013-06-28 16:40 949<!DOCTYPE html PUBLIC " ...
相关推荐
8. `htmleditor`:`Ext.form.HtmlEditor`是一个富文本编辑器,用户可以编辑HTML内容,包括字体、颜色、图片等。 9. `numberfield`:`Ext.form.NumberField`继承自`Ext.form.TextField`,专用于处理数字输入。它提供...
- **功能描述**:Editor 是一个通用编辑器组件,可以用来编辑表单字段或其他数据。 - **主要用途**:用于编辑现有数据,例如在表格单元格内进行编辑。 **2.5 Editor Grid Panel (Ext.grid.EditorGridPanel)** - **...
执照:麻省理工学院演示:论坛:Ext.ux.form.field.UploadFileField 执照:麻省理工学院演示:论坛:Ext.ux.form.field.ImageFileField 执照:麻省理工学院演示:论坛:Ext.ux.form.plugin.HtmlEditor 执照:麻省...
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...
45、Ext.form.Field类 …………………… 41 46、Ext.form.Checkbox类 …………… 42 47、Ext.form.Radio类 ………………… 43 48、Ext.form.HtmlEditor类 …………… 43 49、Ext.form.TextField类 …………… 44 50...
- `Ext.form.field.HtmlEditor`:富文本编辑器。 - `Ext.form.field.Display`:只读文本字段。 - `Ext.form.Label`:标签字段,用于显示文本。 - `Ext.form.FieldSet`:字段集,用于组织和分组表单元素。 5. **...
**WPF.HtmlEditor富文本编辑器Demo**是一个用于Windows Presentation Foundation (WPF)应用程序的示例项目,它展示了如何在WPF环境中实现一个功能丰富的HTML编辑器。这个编辑器允许用户进行基本的文本编辑,查看HTML...
9. **`htmleditor`** - `Ext.form.HtmlEditor`,HTML编辑器,用于编辑富文本。 10. **`label`** - `Ext.form.Label`,标签组件,用于为表单字段提供描述。 11. **`numberfield`** - `Ext.form.NumberField`,...
45、Ext.form.Field类 …………………… 41 46、Ext.form.Checkbox类 …………… 42 47、Ext.form.Radio类 ………………… 43 48、Ext.form.HtmlEditor类 …………… 43 49、Ext.form.TextField类 …………… 44 50...
- `htmleditor`:`Ext.form.HtmlEditor`,HTML编辑器组件。 - `numberfield`:`Ext.form.NumberField`,数字输入框。 - `radio`:`Ext.form.Radio`,单选按钮。 - `textarea`:`Ext.form.TextArea`,多行文本...
- `Ext.data.GroupingStore.group(field)`: 对数据进行分组。 - `Ext.data.GroupingStore.ungroup()`: 解除数据分组。 #### 37. Ext.data.SimpleStore 类 (P.34) - **概述**:简单的存储类,适用于小数据集。 - *...
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 / ...
Ext HTMLEditor是一款基于Ext JS库的富文本编辑器组件,它允许用户在网页上进行类似于Word的文本编辑操作,包括格式化、插入链接、图片等。本文将深入讲解如何利用Ext HTMLEditor实现图片上传功能,以及相关知识点。...
ecplise html编辑器tk.eclipse.plugin.htmleditor_2.2.0.jar 配合GEF插件能在eclipse里识别html的标签来方便编辑html页面。tk.eclipse.plugin.htmleditor_2.2.0.jar文件直接复制到eclipse\plugins里面即可
9. **插件和扩展**:EXT社区提供了许多表单验证相关的插件和扩展,如`Ext.form.field.Picker`,用于下拉选择验证,以及`Ext.form.field.HtmlEditor`,用于富文本编辑器的验证。 10. **实际应用**:在实际项目中,...
43. **Ext.form.HtmlEditor类**:HTML编辑器组件,提供富文本编辑功能。 这些类构成了EXT的核心API,它们提供了丰富的UI组件、数据管理和网络通信功能,使得开发者能够构建出功能强大、用户体验优秀的Web应用。理解...
`Ext.form.HtmlEditor`是一个富文本编辑器,提供了多种格式化工具,如对齐、字体颜色、字体大小等。通过`enableAlignments`、`enableColors`等参数,可以开启或关闭不同的编辑功能,以适应不同复杂度的文本编辑需求...
- **`htmleditor` (Ext.form.HtmlEditor)**: HTML编辑器组件,允许用户编辑HTML内容。 - **`label` (Ext.form.Label)**: 标签组件,用于为表单元素提供描述性标签。 - **`numberfield` (Ext.form.NumberField)**: ...
在本文中,我们将深入探讨ExtJS 2.0中的FormPanel组件,并通过具体的示例来了解如何使用不同的组件,如checkbox、radio以及htmleditor。首先,Ext.FormPanel是ExtJS中用于创建表单的主要组件,它允许我们构建复杂的...
9. **`htmleditor`:** HTML编辑器组件,用于创建富文本编辑器,通过`Ext.form.HtmlEditor`类实现。 10. **`label`:** 标签组件,用于创建表单字段旁的标签,通过`Ext.form.Label`类实现。 11. **`numberfield`:** ...