`
fxiaozj
  • 浏览: 55833 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ExtJs htmleditor重写以及上传图片并显示

 
阅读更多
var form_items  = [{
			layout : 'form',
			labelAlign: 'top',
            frame: true,
			items : [{
				xtype : 'imagehtmleditor',
				height : window.screen.availHeight*0.3,
				width : '98%',
				name : 'itemContent',
				id :'itemContent',
				anchor : '100%',
				hideLabel :true,
				enableSourceEdit:false,
				imagesLoadUrl: this.imagesLoadUrl,
	            imagesDelUrl: this.imagesDelUrl,
	            uploadUrl: this.imagesUploadUrl,
	            imagesDataRecord: Ext.data.Record.create(
			        [{
			            name : "imageId"
			        }, {
			            name : "infoId"
			        }, {
			            name : "title"
			        }, {
			            name : "fileName"
			        }, {
			            name : "filePath"
			        }, {
			            name : "fileType"
			        }]
			    ),
	            dataid: this.imagesDataid,
	            imgUploadFieldName: this.imgUploadFieldName,	
	            dataBoxMapping: {
			        qtip: 'title',
			        imgUrl: 'filePath',
			        text: 'fileName'
			    },
	            rootPath: this.rootPath		
				/*fontFamilies:['Tahoma','宋体','楷体_GB2312','隶书','黑体'],
				createLinkText:'请输入URL链接网址',
				anchor : '100%',
				hideLabel :true,
				name : 'itemContent',
				id :'itemContent',
				border : false,	
				height : window.screen.availHeight*0.3,
				width : '98%',
				enableSourceEdit:false,
				border:false*/
			}]			
		},{
			columnWidth : 1,
			layout : 'form',
			border : false,
			items : [{
				xtype : 'textarea',
				name : 'itemDesc',
				id :'itemDesc',
				anchor : '99%',
				width : '98%',
				height : window.screen.availHeight*0.13,
				cls : 'area_label',
				value : '',
				hideLabel :true,
				readOnly : true
			}]
		 }];

1.点击编辑器的图片按钮,会出现提示,如下图:

2.选择要上传的图片,点击上传,并显示,如下图:

3.通过双击可以查看原图,如下图:

4.点击插入图片,并显示到文本编辑器里,如下图:

  • 大小: 32.3 KB
  • 大小: 32.3 KB
  • 大小: 38.6 KB
  • 大小: 48.1 KB
  • 大小: 31.2 KB
分享到:
评论
1 楼 wilsonchen 2012-06-09  
如何使用的呢?请问楼主!

相关推荐

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

    总结起来,ExtJS HTMLEditor的图片上传和添加网络图片功能涉及前端的事件处理、文件上传、数据交互,以及后端的文件接收、存储和返回URL。理解和实现这些细节,可以创建出功能完备且用户体验良好的富文本编辑器。

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

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

    Extjs_htmleditor插件

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

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

    扩展ExtJs的HtmlEditor编辑器插入图片.pdf 扩展ExtJs的HtmlEditor编辑器插入图片是指在ExtJs框架中,使用HtmlEditor编辑器来实现图片的插入功能。HtmlEditor是ExtJs提供的一个富文本编辑器组件,提供了基本的文本...

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

    这篇博客文章"Extjs的HtmlEidtor富文本编辑器的使用和图片上传显示的实现"将详细介绍如何使用HtmlEditor以及如何实现图片上传和显示的功能。 首先,我们需要了解HtmlEditor的基本用法。HtmlEditor通常包含一个...

    ExtJsHtmlEditor 扩展

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

    EXtjs 图片批量上传

    接着,我们需要监听`change`事件,当用户选择文件后,可以读取这些文件并显示预览。HTML5的FileReader接口可以帮助我们实现这一目标。在`change`事件处理器中,遍历所有选定的文件,并使用`FileReader`读取文件内容...

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

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

    Extjs图片上传 带过滤和缩略图

    在"Extjs图片上传 带过滤和缩略图"这个主题中,我们将深入探讨如何使用ExtJS实现图片上传功能,同时结合过滤和缩略图显示,以提升用户体验。 1. **图片上传组件**: 在ExtJS中,可以使用`Ext.form.FileField`或`...

    extjs的HtmlEditor在chrome中高亮文字

    extjs 4.2 的HtmlEditor在chrome中高亮文字

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

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

    ExtJS4多文件上传,带进度条及管理

    本文将详细解析"ExtJS4多文件上传,带进度条及管理"这一主题,涵盖其核心概念、实现方式以及相关技术。 **一、ExtJS4概述** ExtJS4是Sencha公司推出的一个前端框架,它提供了丰富的组件库和强大的数据绑定机制,...

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

    用户可以选择本地图片,通过Ajax请求将图片上传到服务器,Servlet处理图片并返回URL,最后在HTML Editor中插入图片。这一过程涉及了前端交互、后端处理和文件上传等多个技术点,展示了Web开发中的综合运用。

    EXTJS 多文件上传

    在EXTJS中,`MultiFileUploadField` 是一个组件,它允许用户在单个操作中选择并上传多个文件,极大地提升了用户交互体验。这个功能对于处理大量文件上传的场景非常有用,比如在内容管理系统、图像库或者文件分享平台...

    extjs 4.2 多文件上传

    用Ext编写的多文件上传组件,已封装。 支持多文件上传,文件下载,文件删除,

    EXTJS3.0多文件上传组件

    它提供了预览、进度条显示以及取消上传等功能,极大地提升了用户体验。 EXTJS3.0中的`UploadPanel.js`文件是EXTJS的自定义组件,用于构建一个上传面板。这个面板通常包含文件选择器、上传按钮、上传进度指示器等...

    ExtJS原生多文件拖动上传组件

    ExtJS原生多文件拖动上传组件 使用时修改包路径 1.多文件上传 2.支持拖动上传 3.支持图片压缩 4.支持图片合并 5.文件排序 可扩展实时图片预览 api //初始化画板 initCanvas //上传文件窗口 uploadWindow //初始化...

    ExtJS带进度条的多文件上传和图片预览

    在这个项目中,我们可能使用了`Ext.form.Panel`来创建表单,`Ext.ProgressBar`来显示文件上传进度,以及`Ext.window.Window`来弹出图片预览窗口。 2. **多文件上传**:多文件上传功能允许用户一次选择并上传多个...

    ExtJS 多文件上传 UploadDialog For ExtJS3.x

    - **上传进度显示**:组件会显示每个文件的上传进度,以及整体的上传进度条。 - **错误处理**:当上传失败时,能够捕获错误并提供相应的提示信息。 为了实现上述功能,`UploadDialog`组件内部使用了多种技术和方法...

    extjs struts2 多图片批量上传控件

    在本场景中,"extjs struts2 多图片批量上传控件"是一个集成解决方案,允许用户通过ExtJS前端框架批量上传多张图片,并通过Struts2后端框架进行处理。 **ExtJS** 是一个基于JavaScript的UI库,它提供了丰富的组件和...

Global site tag (gtag.js) - Google Analytics