Ext自己带了一个HtmlEditor,具备基本的编辑功能,而且使用起来非常方便,在web应用起来感觉还不错,但是他缺少了上传功能,这样使得编辑文字的时候不能图文并茂,写一个小工程个人认为不需要集成FCK或者其他的编辑器,使用这个足矣,所以在闲暇之余给HtmlEditor写了一个扩展代码,使得htmlEditor具备图片上传功能,并及时给图片插入到文字中间,代码如下:
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:"resources/resources/images/default/dd/img.png",handler:this.addImage,scope:this});
this.tb.insertButton(18,{cls:"x-btn-icon",
icon:"resources/resources/images/default/dd/code.png",handler:this.addCode,scope:this});
},
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) {
this.fp.form.submit({
waitTitle:"Ժ",
waitMsg : '正在上传......',
method:"POST",
url : 'xxxx',//上传的action
success : function(form, action) {
this.fp.form.findField("path").setValue("/upload/"+action.result.data.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);
使用Ext.extends来扩展一下自定义的htmlEditor,在扩展中,首先建立一个窗口,在图片上传窗口中很简单,就是再次建立一个上传的FormPanel,获取这个表单上传的结果(结果为js数组或者json)。在最后在使用Ext.reg('myhtmleditor',HTMLEditor)注册一下自定义的htmlEditor名称为myhtmleditor,这样在代码中就可以使用myhtmleditor类型了,如下代码:
{
xtype:"myhtmleditor",
name:"content",
value:"",
fieldLabel:"内容",
width:550,
height:400
}
运行结果如下:
整体截图
图片上传图片窗口
代码插入窗口
其实扩展Ext的组件很简单,例如还需要继续扩展HtmlEditor,可以在插入图片创建的window中重新,自己可以任意定义图片插入的窗口,可以设定任何属性,然后给相应的值转化为相应的html代码插入到htmleditor中就可以了!插入代码的过程更加简单,就是向htmlEditor中插入相应的css代码,并给用户的代码嵌入到css中!
- 大小: 11.2 KB
- 大小: 6.5 KB
- 大小: 6.9 KB
分享到:
相关推荐
PHP实例开发源码—帝国6.0FCK增强,代码、自定义插入等新功能.zip PHP实例开发源码—帝国6.0FCK增强,代码、自定义插入等新功能.zip PHP实例开发源码—帝国6.0FCK增强,代码、自定义插入等新功能.zip
基于PHP的帝国6.0FCK增强,代码、自定义插入等新功能.zip
基于PHP的帝国6.0FCK增强,代码、自定义插入等新功能源码.zip
fck 远程图片 下载到本地。很使用的一个功能,使你复制网页上的文章不用再一个个下载到本地再上传,也不用担心别的网页的文章删除导致你的图片不可用。
.NET版本FCK集成SWF多图上传其中单图有加水印代码,水印图片在水印文件夹里替换即可。
可以让你的帝国后台支持插入代码高亮显示等。使用说明: 插件下载后上传到e/admin/ 目录下即可 我本来是要单独取出来的,结果发现麻烦死了 就整个打包了!
FCK服务器上传图片问题,实验得出的心得
解决fck上传中文名的图片乱码的问题,附带fck更改说明和fck瘦身html文件。
FCK editor 2.5.1 例子 源代码
原fck只允许上传文件名为数字或字母的图片,经稍稍改动后,想在你可以上传任意名称的图片。 本资源是一个成型的fck例子,可作为fck的参考教程使用,教会你如何配置及使用fck在线编辑器。
强大的FCK编辑器修改版兼容多个浏览器支持图片上传功能 绝对好用 下载即可用 有问题请联系我 QQ 451082729
FCK编辑器,文件上传,希望大家能够喜欢!
但好多版本的只有flash插入上传功能,并无其他的格式的,很受限制。解决办法主要有两种,有种是为其增加视频插件,按钮。但这个方法,我试过一次没有成功,但办法可能是有的。另一种办法就是扩展flash上传功能,使其...
FCK添加上传视频,想添加图片一样,便捷方便。
修改过上传中文名乱码,文件大小等,字体,工具栏自定义js,实用的东西,需要的朋友来拿,不忽悠!
mvc下富文本编辑器fck fckeditor使用代码。主要功能,富文本上传,可传图片
fck上传等功能不能使用(fck和ie9的问题)
4.直接在页面使用,快速上传图片功能开,带自动生成当日目录 5.使用快速上传图片就可以直接上传至upload/2008-11-7/xxx.jpg 6.使用浏览图片,可看到日期目录列表,浏览图片的上传至upload/xxx.jpg 7.控件的值是 控件...
fck 编辑器是最流行的网页编辑器之一,在其中修改了图片的保存路径,添加了表情信息。
<!-- FCK编辑器的设置 --> <!--设置fck文件名的现实格式--> ...--自定义文件上传的子目录的...--自定义上传后图片URL中的域名--> <add key="FCKeditor:UploadedFilesDomain" value="http://192.168.1.153:8082/"/>