`
兰州wzq
  • 浏览: 10108 次
  • 性别: Icon_minigender_1
  • 来自: 兰州
社区版块
存档分类
最新评论

EXTJS htmleditor 插入图片的改进

阅读更多
//在插入图片之前记录光标.
var imgform;
var range;
var HTMLEditor = Ext.extend(Ext.form.HtmlEditor, {
addImage : function() {
	if (Ext.isIE) {
	if (this.iframe.contentWindow.document.selection.type.toLowerCase() != "none"){
		this.iframe.contentWindow.document.selection.clear() ;
		}
	this.iframe.contentWindow.focus();
	
	range = this.iframe.contentWindow.document.selection.createRange();
	range.collapse(false);
	range.select();
	}
	var editor = this;
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 : '选择图片',
			id : 'UserFile',
			name : 'UserFile',
			inputType : 'file',
			anchor : '90%'
		} ],
		buttons : [{
					text : '上传',
					handler : function() {
						if(Ext.getDom("UserFile").value == ""){
							Ext.Msg.alert("消息","没有选择图片,请选择图片");
							return;
						}
						if (!imgform.form.isValid()) {return;}
						imgform.form.submit({
							waitMsg : '正在上传......',
							url : '/DTAC/declareProject/uploadPic.do?t='+new Date().getTime(),
							success : function(form,action) {
								var element = document.createElement("img");
								element.src = action.result.fileURL;
								element.height = 200;
								element.wigth= 200;
								if (Ext.isIE) {
									/*var value = editor.getValue();
									editor.reset() ;
									editor.insertAtCursor(value);*/
									range.moveEnd("character",0);
									
									
									range.collapse(false);
									range.select();
									editor.iframe.contentWindow.focus();
									editor.insertAtCursor(element.outerHTML);
								} else {
									var selection = editor.win.getSelection();
									if (!selection.isCollapsed) {
										selection.deleteFromDocument();
									}
									selection.getRangeAt(0).insertNode(element);
								}
								// win.hide();//原始方法,但只能传一个图片
								// 更新后的方法
								form.reset();
								win.close();
							},
							failure : function(form,action) {
							/*奖文件上传的窗口清空*/
								form.reset();
								Ext.MessageBox.alert('警告',action.result.msg);
							}
						});
					}
				}, {
					text : '关闭',
					handler : function() {
						win.close(this);
					}
				} ]
				});

		var win = new Ext.Window({
			title : "上传图片",
			width : 300,
			height:150,
			modal : true,
			border : false,
			iconCls : "content/images/image.png",
			layout : "fit",
			items : imgform

		});
		win.show();
	},
	createToolbar : function(editor) {
		HTMLEditor.superclass.createToolbar.call(this, editor);
		this.tb.addButton({
			cls : "x-btn-icon",
			icon : "/DTAC/content/images/image.png",
			handler : this.addImage,
			scope : this,
			 tooltip :      
             {    
                 title : '插入图片',    
                 text : '插入图片到编辑器',    
                 cls : 'x-html-editor-tip'    
             }
		});
	},
	addHelp :function(){
		var win = new Ext.Window({
			title : "编辑器使用帮助",
			width : 300,
			height : 120,
			modal : true,
			border : false,
			iconCls : "/DTAC/content/images/help.png",
			layout : "fit",
			html:'测出填写一些使用指南'
		});
		win.show();
	}
});
Ext.reg('StarHtmleditor', HTMLEditor);

 

分享到:
评论

相关推荐

    extjs htmleditor 图片上传和添加网络图片编辑器

    这个主题主要关注如何在ExtJS的HTMLEditor中实现图片的上传和添加网络图片功能。 首先,理解ExtJS HTMLEditor的基本结构和工作原理是至关重要的。HTMLEditor是一个组件,它可以将HTML代码作为输入,并提供类似于...

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

    enableImages: true, // 开启图片插入功能 plugins: ['sourceedit'] // 可选,添加源代码编辑插件 }); ``` 2. **上传图片处理**:当用户选择图片并点击“插入”按钮时,我们需要监听这个事件。在HTML Editor中,...

    扩展ExtJs的HtmlEditor编辑器插入图片.pdf

    扩展HtmlEditor编辑器的图片插入功能需要实现以下几个步骤: ### 1. 创建图片上传控件 首先,我们需要创建一个图片上传控件,用于上传图片到服务器端。在ExtJs框架中,我们可以使用FileUploadField控件来实现图片...

    Extjs_htmleditor插件

    { name: 'insertimage', text: '插入图片' } ], listeners: { change: function(editor, html) { console.log('内容已更改:', html); } } }] }); } }); ``` 五、优化与进阶 1. **国际化支持**:通过配置...

    完整的Extjs4 htmleditor上传图片插件(包括实例和用法)

    本资源提供了一个完整的ExtJS4 htmleditor图片上传插件,包括前端和后端的实现代码,对于开发者来说是一份非常有价值的参考资料。 首先,我们来看`htmleditor`组件。在ExtJS4中,`Ext.form.field.HtmlEditor`是HTML...

    extjs的HtmlEditor在chrome中高亮文字

    extjs 4.2 的HtmlEditor在chrome中高亮文字

    ExtJsHtmlEditor 扩展

    ExtJs HtmlEditor 扩展 可上传视频上传文件上传图片

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

    本主题聚焦于如何扩展ExtJS库中的HtmlEditor组件,以便更好地处理来自Microsoft Word的复制粘贴操作以及表格操作。HtmlEditor是ExtJS提供的一款强大的富文本编辑器,允许用户在网页中创建和编辑HTML内容,类似于桌面...

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

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

    EXTJS 强大的图片查看器 仿windows照片查看器

    在给定的“EXTJS 强大的图片查看器 仿windows照片查看器”项目中,我们可以了解到,这个组件是EXTJS框架的一个扩展,旨在提供类似Windows操作系统中照片查看器的功能。下面将详细阐述EXTJS图片查看器的关键知识点。 ...

    Extjs的HtmlEidtor富文本编辑器的使用和图片上传显示的实现

    在ExtJS中,HtmlEditor是一个非常有用的组件,它提供了一个完整的HTML编辑器,允许用户在Web页面上进行文本编辑、格式化和插入多媒体内容,如图片。这篇博客文章"Extjs的HtmlEidtor富文本编辑器的使用和图片上传显示...

    ExtJS如何自定义图片按钮组件

    1.ExtJS自定义组件,图片按钮为例. 2.此图片按钮背景完全为图片,没有边框,需要使用者提供2张图片,一张初始化用,一张点击后用,可在'imgPaths:'属性里填写,格式为'01.jpg~02.jpg' 3.解压后请将所有附件放置您extjs...

    Extjs图片渲染效果

    在ExtJS中,图片渲染效果是实现用户界面美观和交互性的重要组成部分。本文将深入探讨ExtJS图片渲染的效果及其应用。 首先,我们要了解ExtJS中的图片渲染基础。在ExtJS中,图片通常以`Image`组件的形式出现,它可以...

    extjs开发精典图片

    在本资源中,我们关注的是"extjs-ico",这是一个与ExtJS相关的图标集合,包含16x16和24x24两种尺寸的PNG格式图片。 在Web开发中,图标是提升用户体验和界面美观度的重要元素。ExtJS-ico图片库为开发者提供了多种...

    TextArea_HTMLEditor 编辑器 learning extjs 中文

    EXTJS中的TextArea_HTMLEditor是用于创建富文本编辑器的组件,它基于IFrame技术,提供了丰富的编辑功能,如字体样式调整、段落格式化、插入图片、链接等。这个组件允许用户以WYSIWYG(所见即所得)的方式编辑HTML...

    EXtjs 图片批量上传

    本教程将深入探讨如何在ExtJS中实现图片的批量上传功能,以及与之相关的批量删除操作。 首先,批量上传图片的核心是利用HTML5的File API,它允许用户在不离开当前页面的情况下读取、处理和上传本地文件。在ExtJS中...

    Extjs图片展示组件实例

    漂亮的Extjs图片展示组件实例,类似于幻灯片,可直接拿去用,非常不错的哦

    extjs中利用htmleditor与第三方打印插件Lodop结合使用WEB打印功能

    本文将详细介绍如何在EXTJS环境中结合htmleditor来使用Lodop进行HTML内容的编辑和打印。 首先,我们需要在HTML页面中创建一个用于打印的隐藏div,它的ID为'PRN_OutReport',并设置样式为"x-hide-display"以确保在...

    EXTJS4开发的图片文章管理项目实例

    这个项目实例是一个基于EXTJS4的图片文章管理系统,它展示了如何利用EXTJS4的功能来实现一个完整的前后端交互的管理系统。后台技术栈选择了JAVA和MYSQL,提供了稳定的数据处理和存储能力。 首先,EXTJS4的核心特性...

    ExtJs框架系列之图片批量显示,上传,删除

    在本文中,我们将深入探讨如何使用ExtJs框架实现图片的批量显示、上传和删除功能。ExtJs是一款强大的JavaScript库,专用于构建富客户端应用程序,它提供了丰富的组件和强大的数据管理能力,非常适合处理图像操作。 ...

Global site tag (gtag.js) - Google Analytics