Ext自己带了一个HtmlEditor,具备基本的编辑功能,而且使用起来非常方便,在web应用起来感觉还不错,但是他缺少了上传功能,这样使得编辑文字的时候不能图文并茂,写一个小工程个人认为不需要集成FCK或者其他的编辑器,使用这个足矣,所以在闲暇之余给HtmlEditor写了一个扩展代码,使得htmlEditor具备图片上传功能,并及时给图片插入到文字中间,代码如下:
使用Ext.extends来扩展一下自定义的htmlEditor,在扩展中,首先建立一个窗口,在图片上传窗口中很简单,就是再次建立一个上传的FormPanel,获取这个表单上传的结果(结果为js数组或者json)。在最后在使用Ext.reg('myhtmleditor',HTMLEditor)注册一下自定义的htmlEditor名称为myhtmleditor,这样在代码中就可以使用myhtmleditor类型了,如下代码:
运行结果如下:
整体截图
图片上传图片窗口
代码插入窗口
其实扩展Ext的组件很简单,例如还需要继续扩展HtmlEditor,可以在插入图片创建的window中重新,自己可以任意定义图片插入的窗口,可以设定任何属性,然后给相应的值转化为相应的html代码插入到htmleditor中就可以了!插入代码的过程更加简单,就是向htmlEditor中插入相应的css代码,并给用户的代码嵌入到css中!