htmleditor 如何上传图片

最近用Extjs做项目，用到htmleditor控件，唯一的缺陷是不可以上传图片，为了以后方便，在基于htmleditor控件上写了一个支持上传图片的。

控件StarHtmleditor

/**

* 重载EXTJS-HTML编辑器

*

* @class HTMLEditor

* @extends Ext.form.HtmlEditor

* @author wuliangbo

*/

HTMLEditor = Ext.extend(Ext.form.HtmlEditor, {

   addImage : function() {

       var editor = this

       var imgform = new Ext.FormPanel({

           region : 'center',

           labelWidth : 55,

           frame : true,

           bodyStyle : 'padding:5px 5px 0',

           autoScroll : true,

           border : false,

           fileUpload : true,

           items : [{

                       xtype : 'textfield',

                       fieldLabel : '选择文件',

                       name : 'userfile',

                       inputType : 'file',

                       allowBlank : false,

                       blankText : '文件不能为空',

                       height : 25,

                       anchor : '90%'

                   }],

           buttons : [{

               text : '上传',

               type : 'submit',

               handler : function() {

                   if (!imgform.form.isValid()) {return}

                   imgform.form.submit({

                       waitMsg : '正在上传',

                       url : 'Default.aspx',

                       success : function(form, action) {

                           var element = document.createElement("img")

                           element.src = action.result.fileURL

                           if (Ext.isIE) {

                               editor.insertAtCursor(element.outerHTML)

                           } else {

                               var selection = editor.win.getSelection()

                               if (!selection.isCollapsed) {

                                   selection.deleteFromDocument()

                               }

                               selection.getRangeAt(0).insertNode(element)

                           }

                           win.hide()

                       },

                       failure : function(form, action) {

                           form.reset()

                           if (action.failureType == Ext.form.Action.SERVER_INVALID)

                               Ext.MessageBox.alert('警告',

                                       action.result.errors.msg)

                       }

                   })

               }

           }, {

               text : '关闭',

               type : 'submit',

               handler : function() {

                   win.close(this)

               }

           }]

       })

       var win = new Ext.Window({

                   title : "上传图片",

                   width : 300,

                   height : 200,

                   modal : true,

                   border : false,

                   iconCls : "picture.png",

                   layout : "fit",

                   items : imgform

               })

       win.show()

   },

   createToolbar : function(editor) {

       HTMLEditor.superclass.createToolbar.call(this, editor)

       this.tb.insertButton(16, {

                   cls : "x-btn-icon",

                   icon : "picture.png",

                   handler : this.addImage,

                   scope : this

               })

   }

})

Ext.reg('StarHtmleditor', HTMLEditor)

页面js代码

Ext.onReady(function() {

   Ext.QuickTips.init()

   Ext.form.Field.prototype.msgTarget = 'side'

   var ff = new Ext.FormPanel({

               title : "文件上传",

               renderTo : document.body,

               width : 600,

               height : 480,

               labelWidth : 55,

               frame : true,

               items : [{

                           xtype : "textfield",

                           name : "title",

                           fieldLabel : "标题",

                           anchor : "98%"

                       }, {

                           xtype : "combo",

                           name : "topic_id",

                           fieldLabel : "所属栏目",

                           anchor : "98%"

                       }, {

                           xtype : "textfield",

                           name : "keywords",

                           fieldLabel : "关键字",

                           anchor : "98%"

                       }, {

                           xtype : "StarHtmleditor",

                           name : "content",

                           fieldLabel : "内容",

                           anchor : "98%"

                       }]

   })

})

后台代码简单实现了一下

protected void Page_Load(object sender, EventArgs e)

       {

           string fileName = string.Empty

           string fileURL = string.Empty

           string rt = string.Empty

           try

           {

               HttpPostedFile file = Request.Files[0]

               fileName = GetFileName(file.FileName)

               file.SaveAs(Server.MapPath("upload//") + fileName)

               fileURL = "upload/" + fileName

               rt = "{success:'true',fileURL:'" + fileURL + "'}"

           }

           catch

           {

               rt = "{success:'false',fileURL:'" + fileURL + "'}"

           }

           

           Response.Write(rt)

       }

       

       private string GetFileName(string FullName)

       {

           string fileName = string.Empty

           int last = FullName.LastIndexOf(@"/")

           fileName = FullName.Substring(last + 1, FullName.Length - last - 1)

           return fileName

       }

实现效果如下

http://blog.csdn.net/zhaozhen1984/article/details/5911839

原文链接请查看谢谢。

http://www.cnblogs.com/wuliangbo/archive/2009/03/08/1406460.html

详查链接。谢谢。

1、首先在需要嵌入得位置加入以下html代码。

2、其次所有需要提交的内容都放在一个表单里面，同样利用object调用的编辑器也放在这个表单里面，同时可以设置一个隐藏的文本区域(或)用以在提交的时候临时保存html在线编辑器的数据。

3、然后点击插入图片的按钮时d出一个上传图片的窗口，利用自己写的程序来实现上传本机图片到服务器上，需要记录图片的路径，通过html在线编辑器的值中加入显示图片的html标签。

4、在添加的时候将HTML在线编辑器来修改数据提交到数据库后还需要能将数据库的内容用HTML在线编辑器来修改数据。

htmleditor 没有相应的属性限制长度。

只能是输入完之后，提交的时候验证一下。

这个不用给你写了吧？ 还是写一下吧。。

var htmleditor = new Ext.form.field.HtmlEditor({.....})

if(htmleditor.getValue().length >100){

    Ext.Msg.alert('提示', '不能超出100字符')

    return

}

---