<!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
相关推荐
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实现图片上传功能，以及相关知识点。...
9. **插件和扩展**：EXT社区提供了许多表单验证相关的插件和扩展，如`Ext.form.field.Picker`，用于下拉选择验证，以及`Ext.form.field.HtmlEditor`，用于富文本编辑器的验证。 10. **实际应用**：在实际项目中，...
- **HtmlEditor**: `Ext.form.HtmlEditor`，HTML编辑器。 - **NumberField**: `Ext.form.NumberField`，数字输入框。 - **Radio**: `Ext.form.Radio`，单选按钮。 - **TextArea**: 由于原文未提及，但这是一个...
7.2.7 在线编辑器Ext.form.HtmlEditor 7.3 ExtJS表单组件的综合应用 第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格 8.2 表格常用功能详解 8.2.1 主要属性功能 8.2.2 自定义...
7.2.7 在线编辑器Ext.form.HtmlEditor 7.3 ExtJS表单组件的综合应用 第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格 8.2 表格常用功能详解 8.2.1 主要属性功能 8.2.2 自定义...
要创建一个HtmlEditor实例，我们需要在ExtJS的代码中调用`Ext.create('Ext.form.field.HtmlEditor')`，并传入相应的配置项，例如宽度、高度、工具栏配置等。 对于图片上传功能，通常需要后端支持。在前端，我们可以...