`
capp0139
  • 浏览: 168234 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
文章分类
社区版块
存档分类
最新评论

EXT HTMLEDITOR

 
阅读更多

CSS:

.icon-hr{
    background: url(../images/icons/htm.gif) left top no-repeat !important;
}

 JS:

建立一个JS文件，随便叫什么名字：

var HTMLEditor = Ext.extend(Ext.form.HtmlEditor, {
	codeStyle : '<br/><pre style="border-right: #999999 1px dotted; padding-right: 5px; border-top: #999999 1px dotted; padding-left: 5px; font-size: 12px; padding-bottom: 5px; margin-left: 10px; border-left: #999999 1px dotted; margin-right: 10px; padding-top: 5px; border-bottom: #999999 1px dotted; background-color: #eeeeee">{0}</pre><br/>',
	addImage : function() {
		var editor = this;
		var imgform = new Ext.FormPanel({
					region : 'center',
					labelWidth : 55,
					frame : true,
					bodyStyle : 'padding:5px 5px 0',
					autoScroll : true,
					border : false,
					fileUpload : true,
					items : [{
								xtype : 'textfield',
								fieldLabel : '选择文件',
								name : 'userfile',
								id : 'userfile',
								inputType : 'file',
								allowBlank : false,
								blankText : '文件不能为空',
								height : 25,
								anchor : '98%'
							}],
					buttons : [{
								text : '上传',
								type : 'submit',
								handler : function() {
									var furl = "";
									furl = imgform.form.findField('userfile').getValue();
									var type = furl.substring(furl.length - 3).toLowerCase();
									var filename = furl.substring(furl.lastIndexOf("\\") + 1);
									if (furl == "" || furl == null) {
										return;
									}
									if (type != 'jpg' && type != 'bmp' && type != 'gif' && type != 'png') {
										alert('仅支持jpg、bmp、gif、png格式的图片');
										return;
									}
									imgform.form.submit({
												url : '/UploadServlet',
												waitMsg : '正在上传......',
												waitTitle : '请等待',
												method : 'POST',
												success : function(form, action) {
													var element = document.createElement("img");
													element.src = "../file/" + action.result.obj.attachUrl;
													element.style.width = "300px";
													element.style.height = "200px";
													if (Ext.isIE) {
														editor.insertAtCursor(element.outerHTML);
													} else {
														var selection = editor.win.getSelection();
														if (!selection.isCollapsed) {
															selection.deleteFromDocument();
														}
														selection.getRangeAt(0).insertNode(element);
													}
													win.close();
												},
												failure : function(form, action) {
													imgform.reset();
													if (action.result.msg == 1) {
														Ext.Msg.alert('错误', '注意上传的文件格式必须为JPG、GIF、PNG、BMP');
													} else if (action.result.msg == 2) {
														Ext.Msg.alert('错误', '注意上传的文件大小限制为10M');
													} else {
														Ext.Msg.alert('错误', '文件上传失败.');
													}
												}
											});
								}
							}, {
								text : '关闭',
								type : 'submit',
								handler : function() {
									win.close(this);
								}
							}]
				})

		var win = new Ext.Window({
					title : "上传图片",
					id : 'picwin',
					width : 400,
					height : 120,
					modal : true,
					border : false,
					iconCls : 'icon-uploadpic',
					layout : "fit",
					items : imgform

				});
		win.show();

	},// 上传图片的扩展
	addFile : function() {
		var editor = this;
		var fileform = new Ext.FormPanel({
					region : 'center',
					labelWidth : 55,
					frame : true,
					bodyStyle : 'padding:5px 5px 0',
					autoScroll : true,
					border : false,
					fileUpload : true,
					items : [{
								xtype : 'textfield',
								fieldLabel : '选择文件',
								name : 'userfile_F',
								id : 'userfile_F',
								inputType : 'file',
								allowBlank : false,
								blankText : '文件不能为空',
								height : 25,
								anchor : '98%'
							}],
					buttons : [{
								text : '上传',
								type : 'submit',
								handler : function() {
									var furl = "";// 文件物理地址
									var fname = "";// 文件名称
									furl = fileform.form.findField('userfile_F').getValue();
									var type = furl.substring(furl.length - 3).toLowerCase();
									if (furl == "" || furl == null) {
										return;
									}
									if (type != 'doc' && type != 'xls') {
										alert('仅支持上传doc、xls格式的文件!');
										return;
									}
									fname = furl.substring(furl.lastIndexOf("\\") + 1);
									fileform.form.submit({
												url : '/UploadServlet',
												waitMsg : '正在上传......',
												waitTitle : '请等待',
												method : 'POST',
												success : function(form, action) {
													var element = document.createElement("a");
													element.href = "../file/" + action.result.obj.attachUrl;
													element.target = '_blank';
													element.innerHTML = fname;
													if (Ext.isIE) {
														editor.insertAtCursor(element.outerHTML);
													} else {
														var selection = editor.win.getSelection();
														if (!selection.isCollapsed) {
															selection.deleteFromDocument();
														}
														selection.getRangeAt(0).insertNode(element);
													}
													winFile.close();
												},
												failure : function() {
													fileform.reset();
													if (action.result.msg == 1) {
														Ext.Msg.alert('错误', '注意上传的文件格式必须为DOC、XLS');
													} else if (action.result.msg == 2) {
														Ext.Msg.alert('错误', '注意上传的文件大小限制为10M');
													} else {
														Ext.Msg.alert('错误', '文件上传失败.');
													}
												}
											});
								}
							}, {
								text : '关闭',
								type : 'submit',
								handler : function() {
									winFile.close(this);
								}
							}]
				})

		var winFile = new Ext.Window({
					title : "上传附件",
					id : 'picwin',
					width : 400,
					height : 120,
					modal : true,
					border : false,
					layout : "fit",
					iconCls : 'icon-uploadfile',
					items : fileform

				});
		winFile.show();

	},// 上传附件的扩展
	addflash : function() {
		var editor = this;
		var flashform = new Ext.FormPanel({
					region : 'center',
					labelWidth : 55,
					frame : true,
					bodyStyle : 'padding:5px 5px 0',
					autoScroll : true,
					border : false,
					items : [{
								xtype : 'textfield',
								fieldLabel : 'flash地址',
								name : 'userflash',
								id : 'userflash',
								allowBlank : false,
								blankText : 'http://',
								emptyText : 'http://',
								height : 25,
								anchor : '98%'
							}],
					buttons : [{
								text : '添加',
								type : 'submit',
								handler : function() {
									var furl = "";// 文件物理地址
									furl = flashform.form.findField('userflash').getValue();
									var type = furl.substring(furl.length - 3).toLowerCase();
									if (furl == "" || furl == null) {
										return;
									}
									if (type != 'swf' && type != 'flv') {
										alert('非法格式，请检查！');
										return;
									}
									var element = document.createElement("embed");
									element.src = furl;
									element.type = "application/x-shockwave-flash";
									element.quality = "high";
									element.style.width = "300px";
									element.style.height = "200px";
									if (Ext.isIE) {
										editor.insertAtCursor(element.outerHTML);
									} else {
										var selection = editor.win.getSelection();
										if (!selection.isCollapsed) {
											selection.deleteFromDocument();
										}
										selection.getRangeAt(0).insertNode(element);
									}
									winflash.close();
								}
							}, {
								text : '关闭',
								type : 'submit',
								handler : function() {
									winflash.close(this);
								}
							}]
				})

		var winflash = new Ext.Window({
					title : "插入flash",
					id : 'flashwin',
					width : 400,
					height : 120,
					modal : true,
					border : false,
					layout : "fit",
					iconCls : 'icon-swf',
					items : flashform

				});
		winflash.show();

	},// 插入flash的扩展
	addfilm : function() {
		var editor = this;
		var filmform = new Ext.FormPanel({
					region : 'center',
					labelWidth : 70,
					frame : true,
					bodyStyle : 'padding:5px 5px 0',
					autoScroll : true,
					border : false,
					items : [{
								xtype : 'textfield',
								fieldLabel : '多媒体地址',
								name : 'userfilm',
								id : 'userfilm',
								allowBlank : false,
								blankText : 'http://',
								emptyText : 'http://',
								height : 25,
								anchor : '98%'
							}],
					buttons : [{
								text : '添加',
								type : 'submit',
								handler : function() {
									var furl = "";// 文件物理地址
									var regImg = new RegExp(/\.(mp3|wav|wma|wmv|avi|mpg|asf|rm|rmvb)$/);
									var regrm = new RegExp(/\.(rm|rmvb)$/);
									furl = filmform.form.findField('userfilm').getValue();
									// var
									// type=furl.substring(furl.length-3).toLowerCase();
									if (furl == "" || furl == null) {
										return;
									}
									if (!furl.match(regImg)) {
										alert('非法格式，请检查！系统支持：mp3,wav,wma,wmv,avi,mpg,asf,rm,rmvb');
										return;
									}
									var element = document.createElement("embed");
									element.src = furl;
									element.style.width = "300px";
									element.style.height = "200px";
									if (furl.match(regrm))
										element.type = "audio/x-pn-realaudio-plugin";
									else
										element.type = "video/x-ms-asf-plugin";
									element.loop = "true";
									element.autostart = "true";
									if (Ext.isIE) {
										editor.insertAtCursor(element.outerHTML);
									} else {
										var selection = editor.win.getSelection();
										if (!selection.isCollapsed) {
											selection.deleteFromDocument();
										}
										selection.getRangeAt(0).insertNode(element);
									}
									winfilm.close();
								}
							}, {
								text : '关闭',
								type : 'submit',
								handler : function() {
									winfilm.close(this);
								}
							}]
				})

		var winfilm = new Ext.Window({
					title : "插入多媒体",
					id : 'filmwin',
					width : 410,
					height : 120,
					modal : true,
					border : false,
					layout : "fit",
					iconCls : 'icon-film',
					items : filmform

				});
		winfilm.show();

	},// 插入多媒体的扩展
	addCode : function() {
		var editor = this;
		function insertCode() {
			var value = wincode.getComponent("codes").getValue();
			// if (Ext.isIE) {
			// editor.insertAtCursor(element.outerHTML);
			// } else {
			// var selection = editor.win.getSelection();
			// if (!selection.isCollapsed) {
			// selection.deleteFromDocument();
			// }
			// selection.getRangeAt(0).insertNode(element);
			// }
			editor.insertAtCursor(String.format(this.codeStyle, value));
			wincode.close();
		};
		var wincode = new Ext.Window({
					title : "添加代码",
					width : 500,
					height : 300,
					modal : true,
					iconCls : "icon-code",
					layout : "fit",
					items : {
						xtype : "textarea",
						id : "codes"
					},
					buttons : [{
								text : "确定",
								handler : insertCode,
								scope : this
							}, {
								text : "取消",
								handler : function() {
									wincode.close();
								}
							}]
				});
		wincode.show();
	}, // 插入代码的扩展
	createToolbar : function(editor) {
		HTMLEditor.superclass.createToolbar.call(this, editor);
		this.tb.insertButton(16, {
					cls : "x-btn-icon",
					iconCls : "icon-uploadpic",
					handler : this.addImage,
					tooltip : "添加图片",
					scope : this
				});
		this.tb.insertButton(17, {
					cls : "x-btn-icon",
					iconCls : 'icon-uploadfile',
					handler : this.addFile,
					tooltip : "添加文件",
					scope : this
				});
		this.tb.insertButton(18, {
					cls : "x-btn-icon",
					iconCls : 'icon-swf',
					handler : this.addflash,
					tooltip : "添加flash文件",
					scope : this
				});
		this.tb.insertButton(19, {
					cls : "x-btn-icon",
					iconCls : 'icon-film',
					handler : this.addfilm,
					tooltip : "添加多媒体文件",
					scope : this
				});
		this.tb.insertButton(20, {// 插入层的扩展，即插入div
			cls : "x-btn-icon",
			iconCls : 'icon-div',
			handler : function() {
				var element = document.createElement("div");
				element.id = "InsertDiv";
				element.style.backgroundColor = "#FAFAFB";
				element.style.borderWidth = "1px";
				element.style.borderStyle = "solid";
				element.style.borderColor = "#AECBE7";
				element.innerHTML = "在此插入内容：<BR>";
				if (Ext.isIE) {
					editor.insertAtCursor(element.outerHTML);
				} else {
					var selection = editor.win.getSelection();
					if (!selection.isCollapsed) {
						selection.deleteFromDocument();
					}
					selection.getRangeAt(0).insertNode(element);
				}
			},
			tooltip : "添加div层",
			scope : this
		});
		this.tb.insertButton(21, { // 插入横线的扩展
			cls : "x-btn-icon",
			iconCls : 'icon-hr',
			handler : function() {
				var element = document.createElement("HR");
				if (Ext.isIE) {
					editor.insertAtCursor(element.outerHTML);
				} else {
					var selection = editor.win.getSelection();
					if (!selection.isCollapsed) {
						selection.deleteFromDocument();
					}
					selection.getRangeAt(0).insertNode(element);
				}
			},
			tooltip : "添加横线",
			scope : this
		});
		this.tb.insertButton(22, {
					cls : "x-btn-icon",
					iconCls : 'icon-code',
					handler : this.addCode,
					tooltip : "添加代码",
					scope : this
				});
	}
});
Ext.reg('CJ_starthtmleditor', HTMLEditor);

 EXT页面调用：

{
                            fieldLabel: '内容',
                            xtype: 'CJ_starthtmleditor',
                            name : 'content',
                            height : 450,
                            anchor:'98%'
                        }
 
分享到：
| 对象比较属性
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Ext Htmleditor 支持上传图片

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

    EXT扩展Htmleditor，在工具栏中添加插入图片按钮，可选择图片插入到编辑器中（也可添加其他功能按钮）

    本教程将深入讲解如何在EXT Htmleditor的工具栏中添加一个插入图片的功能按钮，并拓展讨论EXT Htmleditor的其他自定义可能性。 首先，我们来理解EXT Htmleditor的基本结构。Htmleditor是一个基于IFrame的组件，它...

    新浪htmleditor修改版（添加图片，flv上传）

    新浪htmleditor是一款被广泛使用的在线文本编辑器，尤其在新浪博客中扮演着重要的角色。这个修改版在原版的基础上进行了一些定制化的改动，增强了其功能性和用户体验。下面将详细介绍这款编辑器及其修改内容。 首先...

    EXT.form组件

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

    EXT核心API详解

    47、Ext.form.Radio类 ………………… 43 48、Ext.form.HtmlEditor类 …………… 43 49、Ext.form.TextField类 …………… 44 50、Ext.form.NumberField类 ………… 44 51、Ext.form.TextArea类 …………… 45 52、...

    Extjs_htmleditor插件

    xtype: 'htmleditor', width: 600, height: 400, plugins: ['sourcearea'], // 添加源码查看插件 toolbar: [ { name: 'bold', text: '加粗' }, { name: 'italic', text: '斜体' }, { name: 'insertimage', ...

    Ext的CKEditor组件

    ExtJS是一个强大的JavaScript框架，用于构建富客户端应用。...CKEditor提供了丰富的功能，如字体样式选择、图片上传、链接插入等，极大地提升了表单中的文本编辑体验。 CKEditor的集成是通过ExtJS的`xtype`属性实现的...

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

    **2.23 HTML Editor (Ext.form.HtmlEditor)** - **xtype**: `htmleditor` - **功能描述**：HTML Editor 是一个富文本编辑器。 - **主要用途**：适用于需要用户编辑格式化的文本内容。 **2.24 Number Field (Ext....

    Ext组件说明 Ext组件概述

    ### Ext组件概述与初学者指南 #### 一、Ext组件概览 Ext是一个功能丰富的JavaScript框架，用于构建桌面级Web应用程序。它提供了大量的组件和工具，使得开发者能够快速且高效地构建用户界面。对于初学者而言，理解...

    带插图功能的ext html编辑器

    在EXT框架中，HTML编辑器（Ext.form.HtmlEditor）是一个常用的组件，允许用户在Web页面上进行文本编辑，类似于Word处理软件。然而，原生的EXT HTML编辑器并不直接支持插入图片的功能。 "带插图功能的EXT html编辑器...

    EXT 表单验证EXT 表单验证

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

    htmleditor扩展插入图片功能,使用Extjs+servlet请求实现

    var editor = new Ext.form.HtmlEditor({ width: 500, height: 300, enableAlignments: true, enableLists: true, enableLinks: true, enableImages: true, // 开启图片插入功能 plugins: ['sourceedit'] // ...

    ext_表单提交_数据校验

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

    EXT 完美教程

    EXT JS中的表单是其强大功能的一部分，提供了多种表单控件，如TextField、TextArea、DateField、TimeField、HtmlEditor、ComboBox、Checkbox和Radio。以创建一个简单的表单为例，可以使用FormPanel来组织这些控件： ...

    扩展的ExtJS HtmlEditor可处理Microsoft Word和表操作中的粘贴

    Ext.extend(Ext.form.HtmlEditor, { initComponent: function() { this.addEvents('paste'); // 其他初始化代码... this.on('beforepaste', this.handlePaste, this); }, handlePaste: function(event) { ...

    Ext中xtype和vtype.

    * htmleditor：一个 HTML 编辑器组件，用于编辑 HTML 内容。 * numberfield：一个数字字段组件，用于编辑数字。 * radio：一个单选框组件，用于选择某些选项。 * textarea：一个文本区域组件，用于编辑文本。 * ...

    ext 的ppt ext 的ppt ext 的pptext 的pptext 的ppt

    - `Ext.form.HtmlEditor`：提供一个HTML编辑器，允许用户编辑富文本。 在输入验证方面，Ext Form提供了丰富的验证选项： - `allowBlank`：设置是否允许字段为空。 - `maxLength` 和 `minLength`：分别用于设定字段...

    ExtJS的编辑器HtmlEditor的一个图片插件

    HtmlEditor(编辑器)的一个图片插件，制作过程用到了图片上传等，采用Struts1.2 ，上传组件使用的是Cos，这个插件的意义并不在于插件本身，只是希望给要用ExtJS做文件上传或想做ExtJS插件的朋友提供一种思路 ...

    Ext Js权威指南(.zip.001

    Ex4.0共2个压缩包特性，《ext js权威指南》 前　言 第1章　ext js 4开发入门 / 1 1.1　学习ext js必需的基础知识 / 1 1.2　json概述 / 3 1.2.1　认识json / 3 1.2.2　json的结构 / 3 1.2.3　json的例子 / 4 1.2.4　...

    EXT核心API详解.doc

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

Magicbox
Global site tag (gtag.js) - Google Analytics