扩展ExtJs 4.2.1 htmleditor 添加图片功能
做项目的时候遇到这样一个问题，因为我是用ExtJs做的后台管理框架，所以当我使用ExtJs htmleditor 控件
的时候，发现没有图片上传的功能，于是我打算在网上找找有关的文章，居然真有人写过，不过可惜的是，不支持
ExtJs 4.2.1版本，所以我再搜索，终于被我找到了,现在将代码贴出，本着开源精神，我将代码开源，最后我想
感谢一个人：
马平川，cr10210206@163.com
正是他的奉献所以才完成这个功能的，非常感谢！
Ext.ns('zc');
/**
* 获取项目根路径
* */
zc.bp = function () {
var curWwwPath = window.document.location.href;
var pathName = window.document.location.pathname;
var pos = curWwwPath.indexOf(pathName);
var localhostPath = curWwwPath.substring(0, pos);
var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
return (localhostPath + projectName);
};
/**
* 获取小星星
* */
zc.getStar = function () {
return '<span style="color:#FF0000;">*</span>';
};
/**
* @Description Html编辑器 插入图片控件
* @author 张川(cr10210206@163.com)
*/
Ext.define('Ext.zc.form.HtmlEditorImage', {
extend: 'Ext.util.Observable',
alias: 'widget.zc_form_HtmlEditorImage',
langTitle: '插入图片',
langIconCls: 'heditImgIcon',
init: function (view) {
var scope = this;
view.on('render', function () {
scope.onRender(view);
});
},
/**
* 添加"插入图片"按钮
* */
onRender: function (view) {
var scope = this;
view.getToolbar().add({
iconCls: scope.langIconCls,
tooltip: {
title: scope.langTitle,
width: 60
},
handler: function () {
scope.showImgWindow(view);
}
});
},
/**
* 显示"插入图片"窗体
* */
showImgWindow: function (view) {
var scope = this;
Ext.create('Ext.window.Window', {
width: 400,
height: 305,
title: scope.langTitle,
layout: 'fit',
autoShow: true,
modal: true,
resizable: false,
maximizable: false,
constrain: true,
plain: true,
enableTabScroll: true,
//bodyPadding: '1 1 1 1',
border: false,
items: [{
xtype: 'tabpanel',
enableTabScroll: true,
bodyPadding: '1 1 1 1',
items: [{
title: '上传本地图片',
items: [{
xtype: 'form',
layout: 'column',
autoScroll: true,
border: false,
defaults: {
columnWidth: 1,
labelWidth: 70,
labelAlign: 'right',
padding: '5 5 5 5',
allowBlank: false
},
items: [{
xtype: 'fileuploadfield',
fieldLabel: '选择文件',
beforeLabelTextTpl: zc.getStar(),
buttonText: '请选择...',
name: 'upload',
emptyText: '请选择图片',
blankText: '图片不能为空',
listeners: {
change: function (view, value, eOpts) {
scope.uploadImgCheck(view, value);
}
}
}, {
xtype: 'fieldcontainer',
fieldLabel: '图片大小',
layout: 'hbox',
defaultType: 'numberfield',
defaults: {
flex: 1,
labelWidth: 20,
labelAlign: 'right',
allowBlank: true
},
items: [{
fieldLabel: '宽',
name: 'width',
minValue: 1
}, {
fieldLabel: '高',
name: 'height',
minValue: 1
}]
}, {
xtype: 'textfield',
fieldLabel: '图片说明',
name: 'content',
allowBlank: true,
maxLength: 100,
emptyText: '简短的图片说明'
}, {
columnWidth: 1,
xtype: 'fieldset',
title: '上传须知',
layout: {
type: 'table',
columns: 1
},
collapsible: false, //是否可折叠
defaultType: 'label', //默认的Form表单组件
items: [{
html: '1.上传图片不超过100KB'
}, {
html: '2.为了保证图片能正常使用，我们支持以下格式的图片上传'
}, {
html: ' jpg,jpeg,png,gif'
}]
}],
buttons: [{
text: '保存',
action: 'btn_save',
icon: '../../../Images/extjs/disk.png',
handler: function (btn) {
scope.saveUploadImg(btn, view);
}
}, {
text: '取消',
icon: '../../../Images/extjs/cross.png',
handler: function (btn) {
btn.up('window').close();
}
}]
}]
}, {
title: '链接网络图片',
items: [{
xtype: 'form',
layout: 'column',
autoScroll: true,
border: false,
defaults: {
columnWidth: 1,
labelWidth: 70,
labelAlign: 'right',
padding: '5 5 5 5',
allowBlank: false
},
items: [{
xtype: 'textfield',
fieldLabel: '图片地址',
beforeLabelTextTpl: zc.getStar(),
name: 'url',
emptyText: '请填入支持外链的长期有效的图片URL',
blankText: '图片地址不能为空',
vtype: 'remoteUrl'
}, {
xtype: 'fieldcontainer',
fieldLabel: '图片大小',
layout: 'hbox',
defaultType: 'numberfield',
defaults: {
flex: 1,
labelWidth: 20,
labelAlign: 'right',
allowBlank: true
},
items: [{
fieldLabel: '宽',
name: 'width',
minValue: 1
}, {
fieldLabel: '高',
name: 'height',
minValue: 1
}]
}, {
xtype: 'textfield',
fieldLabel: '图片说明',
name: 'content',
allowBlank: true,
maxLength: 100,
emptyText: '简短的图片说明'
}, {
columnWidth: 1,
xtype: 'fieldset',
title: '上传须知',
layout: {
type: 'table',
columns: 1
},
collapsible: false, //是否可折叠
defaultType: 'label', //默认的Form表单组件
items: [{
html: '1.上传图片不超过100KB'
}, {
html: '2.为了保证图片能正常使用，我们支持以下格式的图片上传'
}, {
html: ' jpg,jpeg,png,gif'
}]
}],
buttons: [{
text: '保存',
action: 'btn_save',
icon: '../../../Images/extjs/disk.png',
handler: function (btn) {
scope.saveRemoteImg(btn, view);
}
}, {
text: '取消',
icon: '../../../Images/extjs/cross.png',
handler: function (btn) {
btn.up('window').close();
}
}]
}]
}]
}]
});
},
/**
* 上传图片验证
**/
uploadImgCheck: function (fileObj, fileName) {
var scope = this;
//图片类型验证
if (!(scope.getImgTypeCheck(scope.getImgHZ(fileName)))) {
Ext.MessageBox.alert('温馨提示', '上传图片类型有误');
fileObj.reset(); //清空上传内容
return;
}
},
/**
* 获取图片后缀(小写)
* */
getImgHZ: function (imgName) {
//后缀
var hz = '';
//图片名称中最后一个.的位置
var index = imgName.lastIndexOf('.');
if (index != -1) {
//后缀转成小写
hz = imgName.substr(index + 1).toLowerCase();
}
return hz;
},
/**
* 图片类型验证
* */
getImgTypeCheck: function (hz) {
var typestr = 'jpg,jpeg,png,gif';
var types = typestr.split(','); //图片类型
for (var i = 0; i < types.length; i++) {
if (hz == types[i]) {
return true;
}
}
return false;
},
/**
* 上传图片
* */
saveUploadImg: function (btn, view) {
var scope = this;
var windowObj = btn.up('window'); //获取Window对象
var formObj = btn.up('form'); //获取Form对象
if (formObj.isValid()) { //验证Form表单
formObj.form.doAction('submit', {
url: zc.bp() + '/',
method: 'POST',
submitEmptyText: false,
waitMsg: '正在上传图片,请稍候...',
timeout: 60000, // 60s
success: function (response, options) {
var result = options.result;
if (!result.success) {
Ext.MessageBox.alert('温馨提示', result.msg);
return;
}
scope.insertImg(view, result.data);
windowObj.close(); //关闭窗体
},
failure: function (response, options) {
Ext.MessageBox.alert('温馨提示', options.result.msg);
}
});
}
},
/**
* 保存远程的图片
* */
saveRemoteImg: function (btn, view) {
var scope = this;
var windowObj = btn.up('window'); //获取Window对象
var formObj = btn.up('form'); //获取Form对象
if (formObj.isValid()) {//验证Form表单
var values = formObj.getValues(); //获取Form表单的值
scope.insertImg(view, values);
windowObj.close(); //关闭窗体
}
},
/**
* 插入图片
* */
insertImg: function (view, data) {
var url = data.url;
var content = data.content;
var width = data.width;
var height = data.height;
var str = '<img src="' + url + '" border="0" ';
if (content != undefined && content != null && content != '') {
str += ' title="' + content + '" ';
}
if (width != undefined && width != null && width != 0) {
str += ' width="' + width + '" ';
}
if (height != undefined && height != null && height != 0) {
str += ' height="' + height + '" ';
}
str += ' />';
view.insertAtCursor(str);
}
});
像这样引用：
{
xtype: 'htmleditor',
border: true,
id: 'context',
plugins: [
Ext.create('Ext.zc.form.HtmlEditorImage')
],
height: 400,
anchor: '100%'
}
总结：
最后，就是将你上传的图片保存在服务器上，所以在“saveRemoteImg()”方法里的ajax提交的url
你们可以自行发挥想保存在哪，这个我就不多说了。
扩展ExtJs 4.2.1 htmleditor 添加图片功能的更多相关文章
- [Swift通天遁地]五、高级扩展-(12)扩展故事板中的元件添加本地化功能
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- kindeditor-4.1.10 结合 Asp.Net MVC 添加图片功能
KindEditor是一套开源的HTML可视化编辑器,现在我要结合Asp.Net MVC4 上传图片功能,做相应的配置和修改, 其实网上也有人写过类似的文章了,我写出来是以防以后使用的时候出现这样的问 ...
- KindEditor ctrl+v添加图片功能
原理: 监听粘贴事件(paste) 获取粘贴版数据,读取到图片数据流进行加载base64 传到后台服务端直接输出为图片文件保存后返回图片读取路径插入编辑器中 /** * 获取编辑器对象 */ wind ...
- Swift - 给图片添加图片水印（图片上绘制另一张图，并可设透明度）
我前面写了篇文章讲解如何给图片添加文字水印,而如果想要添加图片类型的水印也很简单,只要把原来代码里添加文字的部分改成图片即可. 1,效果图如下: (在图片左上角添加了一个半透明的logo图片) 2,为 ...
- C#如何在PDF文件添加图片印章
文档中添加印章可以起一定的作用,比如,防止文件随意被使用,或者确保文档内容的安全性和权威性.C#添加图片印章其实也有很多实现方法,这里我使用的是免费的第三方软件Free Spire.PDF,向大家阐述 ...
- C# 给PDF添加图片背景
C# 给PDF添加图片背景 今天要实现的是给PDF文件添加图片背景这个功能.PDF是近年来最流行的文件之一,无论是办公还是日常生活中都经常会用到,很多时候,PDF文件的背景色都是白色,看多了难免觉得累 ...
- 黄聪：phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护
首先到phpexcel官网上下载最新的phpexcel类,下周解压缩一个classes文件夹,里面包含了PHPExcel.php和PHPExcel的文件夹,这个类文件和文件夹是我们需要的,把class ...
- C# 利用占位符替换word中的字符串和添加图片
利用占位符替换word中的字符串和添加图片 ///<summary> /// 替换word模板文件内容,包括表格中内容 /// 调用如下:WordStr ...
- pyside 为窗口添加图片
有时我们需要添加一些图片到窗口上,下面给一个通过QLable实现的方法. 这里需要注意的是,当你启用多线程时,方法调用的setPixmap,会导致qt报出一个线程安全错误. 因此,让这个绘图工作尽量在 ...
随机推荐
- Java事件总线
在平时写代码的过程中,我们需要实现这样一种功能:当执行某个逻辑时,希望能够进行其他逻辑的处理.最粗暴的方法是直接依赖其他模块,调用该模块的相应函数或者方法.但是,这样做带来一些问题. 模块间相互依赖, ...
- saltstack实战4--综合练习2
Saltstack配置管理-功能模块-安装haproxy 配置管理,我们分了3层 最底层是系统初始化部分 倒数二层是功能模块,就是具体的产品的安装了 假如你的环境需要nginx,php,memcach ...
- Android第三方授权(新浪微博篇)
Android第三方认证新浪微博,相对微信,也比较简单,并且sina给了一个sdk和sdkdemo,这个demo封装了许多,但是自己不准备记录这个demo,而是直接使用sdk 同样去sina官方下载s ...
- JavaScript高级程序开发3笔记
Js对象 注意:js基本数据类型不是对象,但是"abc".match()这种,可以调用对象的方法,是因为调用方法是临时产生了一个wrapper的包装对象,this指向它: Js ...
- java新手笔记30 集合
1.set/list package com.yfs.javase; import java.util.ArrayList; import java.util.Collection; import j ...
- 【译】 Node.js v0.12的新特性 -- Cluster模式采用Round-Robin负载均衡
原文:https://strongloop.com/strongblog/whats-new-in-node-js-v0-12-cluster-round-robin-load-balancing 本 ...
- [zz] 使用ssh公钥密钥自动登陆linux服务器
目录 .生成密匙对 .拷贝公匙到远程机 .启动登陆代理 这种方法处理后每次需要运行命令:ssh-add ~/.ssh/id_dsa 作为一名 linux 管理员,在多台 Linux 服务器上登陆进行远 ...
- js异步收集
http://www.cnblogs.com/rubylouvre/archive/2011/03/18/1984336.html http://www.cnblogs.com/hustskyking ...
- 6款好用的Python IDE
“工欲善其事,必先利其器”,如果说编程是程序员的手艺,那么IDE就是程序员吃饭的家伙了.一个优秀的IDE,最重要的就是在普通文本编辑之外,提供针对特定语言的各种快捷编辑功能,让程序员尽可能快捷.舒适. ...
- Winform的窗体美化心酸路
我想做一位狂热的程序猿粪子! 其实一直都很想做点什么,工作原因林林种种导致停止了前进的脚步. 有时会为自己的一个目标狂热,但经常发觉激情过后更多的总是为自己找借口! 最近感觉奔三将近.逐有感而发,不能 ...