扩展EXT htmlEditor js
//////////////////////////////////////////////////////////////////////////////////////////////////
HTMLEditor=Ext.extend(Ext.form.HtmlEditor,{
codeStyle:'<br/><pre style="border-right: #999999 1px dotted; padding-right: 5px; border-top: #999999 1px dotted; padding-left: 5px; font-size: 12px; padding-bottom: 5px; margin-left: 10px; border-left: #999999 1px dotted; margin-right: 10px; padding-top: 5px; border-bottom: #999999 1px dotted; background-color: #eeeeee">{0}</pre><br/>',
onRender : function(ct, position){
HTMLEditor.superclass.onRender.call(this, ct, position);
if(this.keys){
if(!this.keys.length){
this.keyMap = new Ext.KeyMap(this.getEditorBody(), this.keys);
}
else{
this.keyMap = new Ext.KeyMap(this.getEditorBody(),this.keys[0]);
for(var i=1;i<this.keys.length;i++)this.keyMap.addBinding(this.keys[i]);
}
this.keyMap.stopEvent=true;
}
},
addImage:function(){
function insertImage(){
var editor=this;
//editor.insertAtCursor("<br/><img src='upload/IMG_1198.JPG'/></br>");
win.upload(function(ret){
if(ret){
s="<br/><img src="+ret.path;
if(ret.width)s+=" width="+ret.width;
if(ret.height)s+=" height="+ret.height;
s+=" /><br/>";
editor.insertAtCursor(s);
win.close();
}
});
};
var win=new UploadImageWindow({modal:false,iconCls:"icon-img",
buttons:[{text:"确定",handler:insertImage,scope:this},{text:"取消",handler:function(){win.close();}}]});
win.show();
},
addCode:function(){
function insertCode(){
var value=win.getComponent("codes").getValue();
this.insertAtCursor(String.format(this.codeStyle,value));
win.close();
};
var win=new Ext.Window({title:"添加代码",
width:500,
height:300,
modal:true,
iconCls:"icon-code",
layout:"fit",
items:{xtype:"textarea",id:"codes"},
buttons:[{text:"确定",handler:insertCode,scope:this},{text:"取消",handler:function(){win.close();}}]});
win.show();
},
createToolbar:function(editor){
HTMLEditor.superclass.createToolbar.call(this,editor);
this.tb.insertButton(16,{cls:"x-btn-icon",
icon:"ext/resources/images/default/picture.png",handler:this.addImage,scope:this,tooltip : {
title : '图片',
text : '插入图片.',
cls : 'x-html-editor-tip'
}});
this.tb.insertButton(18,{cls:"x-btn-icon",
icon:"ext/resources/images/default/picture_add.png",handler:this.addCode,scope:this,tooltip : {
title : '代码',
text : '插入代码.',
cls : 'x-html-editor-tip'
}});
},
validateValue : function(value){
if(value.length > this.maxLength){
var s=String.format(this.maxLengthText, this.maxLength);
this.markInvalid(s);
return false;
}
return true;
}
});
UploadImageWindow=Ext.extend(Ext.Window,{
title : '上传图片',
width : 345,
height : 210,
defaults : {
border : false
},
buttonAlign : 'center',
createFormPanel :function() {
return new Ext.form.FormPanel({
defaultType : 'textfield',
labelAlign : 'right',
fileUpload:true,
labelWidth : 75,
frame : true,
defaults : {
width : 220
},
items : [{
name : 'pathFile',
fieldLabel : '选择图片',
inputType : 'file'
},
{
name : 'title',
fieldLabel : '说明'
}
,
{
name : 'path',
fieldLabel : 'URL'
}
,
{
name : 'width',
fieldLabel : '宽度',
value:'240'
},
{
name : 'height',
fieldLabel : '高度',
value:'200'
}
]
});
},
upload:function(fn) {
alert("1");
this.fp.form.submit({
waitTitle:"Ժ",
waitMsg : '正在上传......',
method:"POST",
url : 'codeManage!uploadImage.action',//上传的action
success : function(form, action) {
this.fp.form.findField("path").setValue(action.result.path);
var obj={title:this.fp.form.findField("title").getValue(),
path:this.fp.form.findField("path").getValue(),
width:this.fp.form.findField("width").getValue(),
height:this.fp.form.findField("height").getValue()
}
fn(obj);
},
failure : function(form, action) {
if (action.failureType == Ext.form.Action.SERVER_INVALID)
Ext.MessageBox.alert('', action.result.errors.msg);
fn(false);
},
scope:this
});
},
initComponent : function(){
UploadImageWindow.superclass.initComponent.call(this);
this.fp=this.createFormPanel();
this.add(this.fp);
}
});
//
Ext.reg('myhtmleditor',HTMLEditor);
////////////////////////////////////////////////////////////////////////////////////////////////////
调用方式:
{
xtype:"myhtmleditor",
name:"content",
value:"",
fieldLabel:"内容",
width:550,
height:400
}
////////////////////////////////////////////////////////////////////////////////////////////////////
this.tb.insertButton(16,{cls:"x-btn-icon",
icon:"ext/resources/images/default/picture.png",handler:this.addImage,scope:this,tooltip : {
title : '图片',
text : '插入图片.',
cls : 'x-html-editor-tip'
}});
该处自定义修改图片位置
////////////////////////////////////////////////////////////////////////////////////////////////////
url action 类
分享到:
相关推荐
Ext Htmleditor 支持上传 图片
extjs htmleditor 图片上传和添加网络图片编辑器
完整的Extjs4 htmleditor上传图片插件(包括实例和用法) 有图片上传的前台和后台代码
新浪博客用的在线编辑器,修改了一部分功能,换了几个好看的图标。
ExtJs HtmlEditor 扩展 可上传视频上传文件上传图片
HtmlEditor(编辑器)的一个图片插件,制作过程用到了图片上传等,采用Struts1.2 ,上传组件使用的是Cos,这个插件的意义并不在于插件本身,只是希望给要用ExtJS做文件上传或想做ExtJS插件的朋友提供一种思路 ...
支持上传图片,并在编辑editor中的字体,插入图片 " 字体色| 背景色| 加粗| 斜体| 下划线| 删除线| 上标| 下标| 增加缩进| 减少缩进| 靠左对齐| 居中对齐| 靠右对齐| |全选| 复制| 剪切| 粘贴| 撤消| 另存为| 插入...
一个带上传功能的JSP网页编辑器插件,可上传图片和文件,经过自定制适用于JSP的在线文本编辑器,运行效果如演示截图所示,看上去功能挺多,可满足一般的网页文本编辑。用法说明: \htmleditor\editor\upapi\...
fckediter在线html编辑器
asp.net 编译器肯定能用,有案例。可以从本地上传照片...,做开发必备的。
//msg为关联的内容文本框, img为关联的图片文本框(保存上传的图片) //文件保存路径为绝对路径(相对站点根目录),如/editor/upload/1001/*.* 特色: 1. 轻巧,兼容IE,FF 2. 自动处理Word垃圾代码 3. 带有文件包,可以...
扩展Extjs4.2的htmleditor,添加 “上传图片”,”上传附件”等功能。
3、ExtJS的HtmlEditor的图片文件上传插件。 4、Grid列表和表单,包含添加、删除、批量删除、修改、查看、图片查看和按条件查询列表等功能。 5、导入导出Excel数据,支持xlsx和xls文件。 6、资源管理(菜单管理)。 7...
3ExtJS的HtmlEditor的图片文件上传插件。 4Grid列表和表单,包含添加、删除、批量删除、修改、查看、图片查看和按条件查询列表等功能。 5导入导出Excel数据,支持xlsx和xls文件。 6资源管理(菜单管理)。 7用户管理...
3、ExtJS的HtmlEditor的图片文件上传插件。 4、Grid列表和表单,包含添加、删除、批量删除、修改、查看、图片查看和按条件查询列表等功能。 5、导入导出Excel数据,支持xlsx和xls文件。 6、资源管理(菜单管理)。 7...
2、ExtJS的HtmlEditor的图片文件上传插件。 3、Grid列表和表单,包含添加、删除、批量删除、修改、查看、图片查看和按条件查询列表等功能。 4、导入导出Excel数据,支持xlsx和xls文件。 5、资源管理(菜单管理)。 6...
但发现以编辑的方式随时改变图片等文件的上传地址不是很方便, 虽然其本身提供了很多方式如配置Web.config、使用Application、使用Session等,都有其不便或弱点 例如使用Session就有过期问题等,在网上找了一下没...