`
tesia
  • 浏览: 33269 次
  • 性别: Icon_minigender_2
  • 来自: 广州
社区版块
存档分类
最新评论

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

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


  • 大小: 18.4 KB
分享到:
评论

相关推荐

    EXT.form组件

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

    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 执照:麻省...

    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...

    EXT核心API详解

    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...

    ExtJS-3.4.0系列目录

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

    WPF.HtmlEditor富文本编辑器Demo

    **WPF.HtmlEditor富文本编辑器Demo**是一个用于Windows Presentation Foundation (WPF)应用程序的示例项目,它展示了如何在WPF环境中实现一个功能丰富的HTML编辑器。这个编辑器允许用户进行基本的文本编辑,查看HTML...

    ExtJs组件类的对应表

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

    ExtJS入门教程(超级详细)

    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...

    ExtJs_xtype一览

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

    extjs帮助文档pdf版

    - `Ext.data.GroupingStore.group(field)`: 对数据进行分组。 - `Ext.data.GroupingStore.ungroup()`: 解除数据分组。 #### 37. Ext.data.SimpleStore 类 (P.34) - **概述**:简单的存储类,适用于小数据集。 - *...

    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 / ...

    Ext Htmleditor 支持上传图片

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

    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里面即可

    EXT 表单验证EXT 表单验证

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

    EXT核心API详解.doc

    43. **Ext.form.HtmlEditor类**:HTML编辑器组件,提供富文本编辑功能。 这些类构成了EXT的核心API,它们提供了丰富的UI组件、数据管理和网络通信功能,使得开发者能够构建出功能强大、用户体验优秀的Web应用。理解...

    ext_表单提交_数据校验

    `Ext.form.HtmlEditor`是一个富文本编辑器,提供了多种格式化工具,如对齐、字体颜色、字体大小等。通过`enableAlignments`、`enableColors`等参数,可以开启或关闭不同的编辑功能,以适应不同复杂度的文本编辑需求...

    ExtJs xtype一览

    - **`htmleditor` (Ext.form.HtmlEditor)**: HTML编辑器组件,允许用户编辑HTML内容。 - **`label` (Ext.form.Label)**: 标签组件,用于为表单元素提供描述性标签。 - **`numberfield` (Ext.form.NumberField)**: ...

    .archExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇).doc

    在本文中,我们将深入探讨ExtJS 2.0中的FormPanel组件,并通过具体的示例来了解如何使用不同的组件,如checkbox、radio以及htmleditor。首先,Ext.FormPanel是ExtJS中用于创建表单的主要组件,它允许我们构建复杂的...

    extJs xtype 类型

    9. **`htmleditor`:** HTML编辑器组件,用于创建富文本编辑器,通过`Ext.form.HtmlEditor`类实现。 10. **`label`:** 标签组件,用于创建表单字段旁的标签,通过`Ext.form.Label`类实现。 11. **`numberfield`:** ...

Global site tag (gtag.js) - Google Analytics