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);

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值