扩展extjs的htmleditor实现本地下传
日期：2014-05-17 浏览次数：20762 次
扩展extjs的htmleditor实现本地上传
主要思路：
这里主要针对本地图片上传，其他文件上传同理，只是config配置信息中permitted_extensions限制的上传类型不同罢了
?
1. 在Ext.ux.plugins中注册自定义组件Upload，在组件init时，往htmleditor工具栏添加一个图片上传的菜单，然后再菜单上绑定mousedown事件处理方法imageInsert()，该方法内部实际是调用了Ext.ux.UploadDialog.Dialog，把config信息配置到Ext.ux.UploadDialog.Dialog中，以实现图片上传功能
?
2. 在引用时，在htmleditor的plugins中配置自定义组件Upload并配置config信息即可
?
?
?
customer.js
?Ext.namespace('Ext.ux','Ext.ux.plugins');
Ext.ux.plugins.Upload=function(config){
config=config||{};
Ext.apply(this,config);
this.init=function(htmlEditor) {
this.editor=htmlEditor;
this.editor.on('render',onRender,this);
};
this.imageInsert=function() {
var dialog = new Ext.ux.UploadDialog.Dialog({
title:config.title || '图片上传',
url: config.url || '',
post_var_name: config.post_var_name || '',
reset_on_hide: config.reset_on_hide || false,
modal: config.modal || true,
permitted_extensions: config.permitted_extensions || ['JPG','jpg','JPEG','jpeg','GIF','gif','PNG','png'],
allow_close_on_upload: config.allow_close_on_upload || false,
upload_autostart: config.upload_autostart || true //是否自动上传
});
dialog.show();
//上传成功后回调函数
dialog.on('uploadsuccess',function(dialog, filename, resp_data, record){
config.uploadCallback || ''
});
}
function onRender(){
if( ! Ext.isSafari){
this.editor.tb.add({
itemId : 'htmlEditorImage',
cls : 'x-btn-icon x-edit-insertimage',
enableToggle : false,
scope : this,
handler : function(){
this.imageInsert();
},
clickEvent : 'mousedown',
tooltip : config.buttonTip ||
{
title : '插入图片',
text : '插入图片到编辑器',
cls : 'x-html-editor-tip'
},
tabIndex :- 1
});
}
}
}
?
页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="extjs2.3/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs2.3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs2.3/ext-all.js"></script>
<script type="text/javascript" src="extjs2.3/ux/upload/js/Ext.ux.UploadDialog.js" ></script>
<script type="text/javascript" src="extjs2.3/ux/upload/js/Ext.ux.UploadDialog.packed.js"></script>
<link rel="stylesheet" type="text/css" href="extjs2.3/ux/upload/css/Ext.ux.UploadDialog.css"/>
<script type="text/javascript" src="customer.js" ></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
new Ext.FormPanel({
renderTo: 'form',
defaultType: 'textfield',
items: [{
xtype:'htmleditor',
width: 650,
height: 350,
plugins: new Ext.ux.plugins.Upload({
title:'本地图片上传',
url: 'shop/link/link_edit!uploadImage.action',
post_var_name:'imageUpload',
reset_on_hide: false,
modal: true,
permitted_extensions:['JPG','jpg','JPEG','jpeg','GIF','gif','PNG','png'],
allow_close_on_upload: true,
upload_autostart: true //是否自动上传
})
}
]
});
});
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
