所有设置都是按部就班，没有特别的地方，基本就只是功能的开启与关闭
createLinkText：‘’表示创建超链接按钮的提示信息，在这之前别忘记了把
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'title';
加上，否则提示信息会看不到效果！
还有一个选项就是buttonTips,其接受一个对象
sourceedit:{title:'源代码编辑',text:'切换源代码编辑模式'}
具体实现看代码，
htmleditor.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>htmleditor.html</title>
<style type="text/css">
body{background-color:#777777}
#form-he{width: 700px;margin-left: auto;margin-right: auto;}
</style>
<link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../Ext/ext-all.js"></script>
<script type="text/javascript" src="htmleditor.js"></script>
</head>
<body>
<div id="form-he"></div>
</body>
</html>
htmleditor.js
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'title';
var form = new Ext.FormPanel({
title : 'HtmlEditor应用',
width : 600,
autoHeight : true,
renderTo : 'form-he',
bodyStyle : "padding:2px",
border : false,
frame : true,
items : [{
autoHeight : true,
xtype : 'fieldset',
collapsible :true,
collapsed :false,
layout : 'form',
title:'复选框',
items:[{
xtype:'htmleditor',
name:'content',
hideLabel :true,
anchor : '100%',
createLinkText :'创建超链接',//创建超链接的提示信息
defaultLinkValue :'http://www.',//默认连接值，默认值为http://
enableAlignments :true,//是否启用对齐按钮，包括左中右三个按钮
enableColors :true,//是否启用前景色背景色按钮，默认为true
enableFont :true,//是否启用字体选择按钮 默认为true
enableFontSize :true,//是否启用字体加大缩小按钮
enableFormat :true,//是否启用加粗斜体下划线按钮
enableLists :true,//是否启用列表按钮t
enableSourceEdit :true,//是否启用代码编辑按钮
fontFamilies :['宋体','隶书','黑体'],
buttonTips :{
bold : {//用来设置按钮的提示信息,可以为每个按钮设置,这里做俩个演示其他的去试下就知道了
title: '粗体 (Ctrl+B)',
text: '设置字体样式为粗体.'
},
italic : {
title: '斜体 (Ctrl+I)',
text: '设置字体样式为斜体.'
},
sourceedit:{
title:'源代码编辑',
text:'切换源代码编辑模式'
}
}
}]
}],
buttons : [{
text : '提交',
scope : this,
handler : function() {
alert(Ext.encode(form.form.getValues()));
}
}, {
text : '重置'
}]
})
})
这么简单的配置，看以下就差不多了，用的时候再查API都行！
分享到：
相关推荐
Ext JS 提供了诸如表格、树形视图、表单、面板、窗口等大量组件，而HTMLEditor就是其中的一个，用于实现富文本编辑。 2. Ext HTMLEditor组件 Ext HTMLEditor是一个强大的HTML编辑器组件，它提供了一种在浏览器中...
Ext的表单组件为创建复杂的数据输入界面提供了强大的支持。 ##### 1. **Checkbox（复选框）** Checkbox组件允许用户选择多个选项中的一个或多个。 ##### 2. **ComboBox（组合框）** ComboBox组件结合了文本框和...
它提供了丰富的组件库，包括表格、表单、菜单等，而表单验证功能则是其表单组件的核心部分。 EXT表单验证主要涉及以下几个方面： 1. **字段验证**：EXT表单中的每个字段（Field）都可以配置验证规则。这些规则可以...
总之，Ext JS的表单组件及其数据校验功能，为Web应用开发提供了强大且灵活的工具集，使得创建高质量的用户界面变得既简单又高效。通过合理配置和利用这些组件，开发者能够构建出既美观又实用的Web应用程序，显著提升...
### Ext组件概述与详解 #### 一、Ext基础组件 **1.1 Box Component (Ext.BoxComponent)** - **xtype**: `box` - **功能描述**：Box Component 是一个非常基本的 Ext 组件，主要用于定义具有边框和其他布局属性的...
在EXT JS中，表单组件不仅包含基本的输入字段，还支持复杂的输入类型和验证机制。 1. `form`：`Ext.FormPanel`是EXT JS中的表单面板，它是一个容器，可以容纳各种表单字段和其他组件。表单面板允许你定义布局、提交...
CKEditor提供了丰富的功能，如字体样式选择、图片上传、链接插入等，极大地提升了表单中的文本编辑体验。 CKEditor的集成是通过ExtJS的`xtype`属性实现的，`xtype`是定义组件类型的关键字。在创建ExtJS表单时，你...
首先，Ext.FormPanel是ExtJS中用于创建表单的主要组件，它允许我们构建复杂的表单布局并处理用户输入的数据。 1. **Checkbox简单示例** Checkbox在ExtJS中用于创建复选框，可以用来让用户选择多个选项。在示例中，...
在EXT JS这个强大的JavaScript框架中，表单布局是构建用户界面时一个非常重要的组成部分。EXT JS提供了多种布局方式，...通过灵活运用EXT JS的布局和表单组件，我们可以构建出满足各种需求的动态、交互式的Web表单。
* form：一个表单组件，用于容纳其他组件。 * checkbox：一个复选框组件，用于选择某些选项。 * combo：一个组合框组件，用于选择某些选项。 * datefield：一个日期选择器组件，用于选择日期。 * field：一个基本的...
在本文中，我们将深入探讨Ext Form组件，这是Ext JS中的核心组件之一，用于创建复杂的表单界面。表单是任何Web应用中收集用户输入的关键部分，而Ext JS提供了一套完整的工具来帮助开发者创建、验证和提交表单数据。 ...
1. **`form`** - `Ext.FormPanel`或`Ext.form.FormPanel`，表单面板组件，用于创建表单并管理其字段。 2. **`checkbox`** - `Ext.form.Checkbox`，多选框组件，用于创建多选输入。 3. **`combo`** - `Ext.form....
其中，表单组件在Web应用中扮演着重要的角色，是收集用户输入数据的主要途径。本文将详细介绍ExtJS中常用表单组件的创建、应用以及验证和数据绑定等方面的知识，旨在帮助读者深入理解和掌握ExtJS表单的使用方法。 #...
34. **Ext.form.HtmlEditor类**：HTML编辑器组件，允许用户编辑HTML内容。 EXT的核心API涵盖了许多方面，为开发富交互的Web应用提供了全面的支持。无论是DOM操作、数据处理还是UI组件，EXT都有相应的类和方法来简化...
8.4.1 组件管理及查询：ext.componentmanager与ext.componentquery / 423 8.4.2 焦点管理：ext.focusmanager / 424 8.4.3 z-order管理：ext.zindexmanager与ext.windowmanager / 425 8.4.4 状态管理：ext.state....
- `xtype: 'htmleditor'`，富文本编辑器组件。 21. **inputType** 属性 - 输入类型。 - 示例：`inputType: 'password'`，密码输入类型。 22. **anchor** 属性 - 设置组件占据容器的比例。 - 示例：`anchor: '...
- **`form` (Ext.FormPanel/Ext.form.FormPanel)**: 表单面板组件，用于创建包含多个表单元素的表单。 - **`checkbox` (Ext.form.Checkbox)**: 多选框组件，用于实现多选功能。 - **`combo` (Ext.form.ComboBox)**: ...