//在插入图片之前记录光标. 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的基本结构和工作原理是至关重要的。HTMLEditor是一个组件,它可以将HTML代码作为输入,并提供类似于...
enableImages: true, // 开启图片插入功能 plugins: ['sourceedit'] // 可选,添加源代码编辑插件 }); ``` 2. **上传图片处理**:当用户选择图片并点击“插入”按钮时,我们需要监听这个事件。在HTML Editor中,...
扩展HtmlEditor编辑器的图片插入功能需要实现以下几个步骤: ### 1. 创建图片上传控件 首先,我们需要创建一个图片上传控件,用于上传图片到服务器端。在ExtJs框架中,我们可以使用FileUploadField控件来实现图片...
{ name: 'insertimage', text: '插入图片' } ], listeners: { change: function(editor, html) { console.log('内容已更改:', html); } } }] }); } }); ``` 五、优化与进阶 1. **国际化支持**:通过配置...
本资源提供了一个完整的ExtJS4 htmleditor图片上传插件,包括前端和后端的实现代码,对于开发者来说是一份非常有价值的参考资料。 首先,我们来看`htmleditor`组件。在ExtJS4中,`Ext.form.field.HtmlEditor`是HTML...
extjs 4.2 的HtmlEditor在chrome中高亮文字
ExtJs HtmlEditor 扩展 可上传视频上传文件上传图片
本主题聚焦于如何扩展ExtJS库中的HtmlEditor组件,以便更好地处理来自Microsoft Word的复制粘贴操作以及表格操作。HtmlEditor是ExtJS提供的一款强大的富文本编辑器,允许用户在网页中创建和编辑HTML内容,类似于桌面...
HtmlEditor(编辑器)的一个图片插件,制作过程用到了图片上传等,采用Struts1.2 ,上传组件使用的是Cos,这个插件的意义并不在于插件本身,只是希望给要用ExtJS做文件上传或想做ExtJS插件的朋友提供一种思路 ...
在给定的“EXTJS 强大的图片查看器 仿windows照片查看器”项目中,我们可以了解到,这个组件是EXTJS框架的一个扩展,旨在提供类似Windows操作系统中照片查看器的功能。下面将详细阐述EXTJS图片查看器的关键知识点。 ...
在ExtJS中,HtmlEditor是一个非常有用的组件,它提供了一个完整的HTML编辑器,允许用户在Web页面上进行文本编辑、格式化和插入多媒体内容,如图片。这篇博客文章"Extjs的HtmlEidtor富文本编辑器的使用和图片上传显示...
1.ExtJS自定义组件,图片按钮为例. 2.此图片按钮背景完全为图片,没有边框,需要使用者提供2张图片,一张初始化用,一张点击后用,可在'imgPaths:'属性里填写,格式为'01.jpg~02.jpg' 3.解压后请将所有附件放置您extjs...
在ExtJS中,图片渲染效果是实现用户界面美观和交互性的重要组成部分。本文将深入探讨ExtJS图片渲染的效果及其应用。 首先,我们要了解ExtJS中的图片渲染基础。在ExtJS中,图片通常以`Image`组件的形式出现,它可以...
在本资源中,我们关注的是"extjs-ico",这是一个与ExtJS相关的图标集合,包含16x16和24x24两种尺寸的PNG格式图片。 在Web开发中,图标是提升用户体验和界面美观度的重要元素。ExtJS-ico图片库为开发者提供了多种...
EXTJS中的TextArea_HTMLEditor是用于创建富文本编辑器的组件,它基于IFrame技术,提供了丰富的编辑功能,如字体样式调整、段落格式化、插入图片、链接等。这个组件允许用户以WYSIWYG(所见即所得)的方式编辑HTML...
本教程将深入探讨如何在ExtJS中实现图片的批量上传功能,以及与之相关的批量删除操作。 首先,批量上传图片的核心是利用HTML5的File API,它允许用户在不离开当前页面的情况下读取、处理和上传本地文件。在ExtJS中...
漂亮的Extjs图片展示组件实例,类似于幻灯片,可直接拿去用,非常不错的哦
本文将详细介绍如何在EXTJS环境中结合htmleditor来使用Lodop进行HTML内容的编辑和打印。 首先,我们需要在HTML页面中创建一个用于打印的隐藏div,它的ID为'PRN_OutReport',并设置样式为"x-hide-display"以确保在...
这个项目实例是一个基于EXTJS4的图片文章管理系统,它展示了如何利用EXTJS4的功能来实现一个完整的前后端交互的管理系统。后台技术栈选择了JAVA和MYSQL,提供了稳定的数据处理和存储能力。 首先,EXTJS4的核心特性...
在本文中,我们将深入探讨如何使用ExtJs框架实现图片的批量显示、上传和删除功能。ExtJs是一款强大的JavaScript库,专用于构建富客户端应用程序,它提供了丰富的组件和强大的数据管理能力,非常适合处理图像操作。 ...