擴展ExtJs 4.2.1 htmleditor 添加圖片功能
作項目的時候遇到這樣一個問題，由於我是用ExtJs作的後臺管理框架，因此當我使用ExtJs htmleditor 控件javascript
的時候，發現沒有圖片上傳的功能，因而我打算在網上找找有關的文章，竟然真有人寫過，不過惋惜的是，不支持html
ExtJs 4.2.1版本，因此我再搜索，終於被我找到了,如今將代碼貼出，本着開源精神，我將代碼開源，最後我想java
感謝一我的：ajax
馬平川，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提交的urlflex
大家能夠自行發揮想保存在哪，這個我就很少說了。ui
相關文章
- 1. 爲jupyter_notebook添加擴展功能
- 2. wangEditor-3.1.1 自己擴展的， 擴展圖片添加alt標籤
- 3. FCK 添加複製圖片功能
- 4. [ExtJS 4.2.1] Panel Maximizable
- 5. ExtJS擴展：擴展grid
- 6. Flutter圖片添加水印功能
- 7. 圖片添加水印功能
- 8. Extjs擴展 MicProgressBar
- 9. EXTJS中整合tinymce的富文本編輯器，添加上傳圖片功能
- 10. php添加redis擴展圖文詳解
- 更多相關文章...
- • Swift 擴展 - Swift 教程
- • Thymeleaf擴展 - Thymeleaf 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • SpringBoot中properties文件不能自動提示解決方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
