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
分享到:
相关推荐
总结起来,ExtJS HTMLEditor的图片上传和添加网络图片功能涉及前端的事件处理、文件上传、数据交互,以及后端的文件接收、存储和返回URL。理解和实现这些细节,可以创建出功能完备且用户体验良好的富文本编辑器。
本资源提供了一个完整的ExtJS4 htmleditor图片上传插件,包括前端和后端的实现代码,对于开发者来说是一份非常有价值的参考资料。 首先,我们来看`htmleditor`组件。在ExtJS4中,`Ext.form.field.HtmlEditor`是HTML...
xtype: 'htmleditor', width: 600, height: 400, plugins: ['sourcearea'], // 添加源码查看插件 toolbar: [ { name: 'bold', text: '加粗' }, { name: 'italic', text: '斜体' }, { name: 'insertimage', ...
扩展ExtJs的HtmlEditor编辑器插入图片.pdf 扩展ExtJs的HtmlEditor编辑器插入图片是指在ExtJs框架中,使用HtmlEditor编辑器来实现图片的插入功能。HtmlEditor是ExtJs提供的一个富文本编辑器组件,提供了基本的文本...
这篇博客文章"Extjs的HtmlEidtor富文本编辑器的使用和图片上传显示的实现"将详细介绍如何使用HtmlEditor以及如何实现图片上传和显示的功能。 首先,我们需要了解HtmlEditor的基本用法。HtmlEditor通常包含一个...
ExtJs HtmlEditor 扩展 可上传视频上传文件上传图片
接着,我们需要监听`change`事件,当用户选择文件后,可以读取这些文件并显示预览。HTML5的FileReader接口可以帮助我们实现这一目标。在`change`事件处理器中,遍历所有选定的文件,并使用`FileReader`读取文件内容...
在本文中,我们将深入探讨如何使用ExtJs框架实现图片的批量显示、上传和删除功能。ExtJs是一款强大的JavaScript库,专用于构建富客户端应用程序,它提供了丰富的组件和强大的数据管理能力,非常适合处理图像操作。 ...
在"Extjs图片上传 带过滤和缩略图"这个主题中,我们将深入探讨如何使用ExtJS实现图片上传功能,同时结合过滤和缩略图显示,以提升用户体验。 1. **图片上传组件**: 在ExtJS中,可以使用`Ext.form.FileField`或`...
extjs 4.2 的HtmlEditor在chrome中高亮文字
HtmlEditor(编辑器)的一个图片插件,制作过程用到了图片上传等,采用Struts1.2 ,上传组件使用的是Cos,这个插件的意义并不在于插件本身,只是希望给要用ExtJS做文件上传或想做ExtJS插件的朋友提供一种思路 ...
本文将详细解析"ExtJS4多文件上传,带进度条及管理"这一主题,涵盖其核心概念、实现方式以及相关技术。 **一、ExtJS4概述** ExtJS4是Sencha公司推出的一个前端框架,它提供了丰富的组件库和强大的数据绑定机制,...
用户可以选择本地图片,通过Ajax请求将图片上传到服务器,Servlet处理图片并返回URL,最后在HTML Editor中插入图片。这一过程涉及了前端交互、后端处理和文件上传等多个技术点,展示了Web开发中的综合运用。
在EXTJS中,`MultiFileUploadField` 是一个组件,它允许用户在单个操作中选择并上传多个文件,极大地提升了用户交互体验。这个功能对于处理大量文件上传的场景非常有用,比如在内容管理系统、图像库或者文件分享平台...
用Ext编写的多文件上传组件,已封装。 支持多文件上传,文件下载,文件删除,
它提供了预览、进度条显示以及取消上传等功能,极大地提升了用户体验。 EXTJS3.0中的`UploadPanel.js`文件是EXTJS的自定义组件,用于构建一个上传面板。这个面板通常包含文件选择器、上传按钮、上传进度指示器等...
ExtJS原生多文件拖动上传组件 使用时修改包路径 1.多文件上传 2.支持拖动上传 3.支持图片压缩 4.支持图片合并 5.文件排序 可扩展实时图片预览 api //初始化画板 initCanvas //上传文件窗口 uploadWindow //初始化...
在这个项目中,我们可能使用了`Ext.form.Panel`来创建表单,`Ext.ProgressBar`来显示文件上传进度,以及`Ext.window.Window`来弹出图片预览窗口。 2. **多文件上传**:多文件上传功能允许用户一次选择并上传多个...
- **上传进度显示**:组件会显示每个文件的上传进度,以及整体的上传进度条。 - **错误处理**:当上传失败时,能够捕获错误并提供相应的提示信息。 为了实现上述功能,`UploadDialog`组件内部使用了多种技术和方法...
在本场景中,"extjs struts2 多图片批量上传控件"是一个集成解决方案,允许用户通过ExtJS前端框架批量上传多张图片,并通过Struts2后端框架进行处理。 **ExtJS** 是一个基于JavaScript的UI库,它提供了丰富的组件和...