最近在做项目的时候感觉还是不完美，于是在此基础上又进行了扩展，目前CJ_StarHtmlEditor支持：

图片上传 文件上传 插入flash 插入多媒体 插入层 插入横线等功能，基本上能够满足要求了。

大家可以再次基础上继续扩展，非常的方便，想实现什么效果都行，希望大家多多交流哦。

CJ_StarHtmlEditor.js的代码如下，使用方法，直接复制，保存成CJ_StarHtmlEditor.js就可以用了。

/**

* 作者：陈杰

* QQ : 710782046

* Email:ovenjackchain@gmail.com

* Blog :http://hi.baidu.com/jackvoilet

*/ 

var 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',

       id : 'userfile',

       inputType : 'file',

       allowBlank : false,

       blankText : '文件不能为空',

       height : 25,

       anchor : '98%'

      }],

    buttons : [{

     text : '上传',

     type : 'submit',

     handler : function() {

      var furl="";

      furl=imgform.form.findField('userfile').getValue();

      var type=furl.substring(furl.length-3).toLowerCase();

      var filename=furl.substring(furl.lastIndexOf("\\")+1);

      if (furl==""||furl==null) {return;}

      if(type!='jpg'&&type!='bmp'&&type!='gif'&&type!='png'){

       alert('仅支持jpg、bmp、gif、png格式的图片');

       return;

      }

      imgform.form.submit({

       url : '/newsinfo.mvc/AddFiles_newsinfo',

       waitMsg : '正在上传......',

       waitTitle : '请等待',

       method : 'POST',

       success : function() {

        var element = document.createElement("img");

        element.src = "../UploadFile/"+filename;

        element.style.width="300px";

             element.style.height="200px";

        if (Ext.isIE) {

         editor.insertAtCursor(element.outerHTML);

        } else {

         var selection = editor.win.getSelection();

         if (!selection.isCollapsed) {

          selection.deleteFromDocument();

         }

         selection.getRangeAt(0).insertNode(element);

        }

        win.close();

       },

       failure : function(form, action) {

        form.reset();

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

         Ext.MessageBox.alert('警告',

           '上传失败，仅支持jpg、bmp、gif、png格式的图片');

       

       }

      

      });

     }

    }, {

     text : '关闭',

     type : 'submit',

     handler : function() {

      win.close(this);

     }

    }]

   })

var win = new Ext.Window({

      title : "上传图片",

      id : 'picwin',

      width : 400,

      height : 120,

      modal : true,

      border : false,

      iconCls:'icon-uploadpic',

      layout : "fit",

      items : imgform

});

   win.show();

  

},//上传图片的扩展
addFile : function() {

   var editor = this;

   var fileform = 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_F',

       id : 'userfile_F',

       inputType : 'file',

       allowBlank : false,

       blankText : '文件不能为空',

       height : 25,

       anchor : '98%'

      }],

    buttons : [{

     text : '上传',

     type : 'submit',

     handler : function() {

      var furl="";//文件物理地址

      var fname="";//文件名称

      furl=fileform.form.findField('userfile_F').getValue();

      var type=furl.substring(furl.length-3).toLowerCase();

      if (furl==""||furl==null) {return;}

      if(type!='doc'&&type!='xls'){

       alert('仅支持上传doc、xls格式的文件!');

       return;

      }

      fname=furl.substring(furl.lastIndexOf("\\")+1);

      fileform.form.submit({

       url : '/newsinfo.mvc/AddFiles_newsinfo',

       waitMsg : '正在上传......',

       waitTitle : '请等待',

       method : 'POST',

       success : function() {

        var element = document.createElement("a");

        element.href = "../UploadFile/"+fname;

        element.target = '_blank';

        element.innerHTML = fname;

        if (Ext.isIE) {

         editor.insertAtCursor(element.outerHTML);

        } else {

         var selection = editor.win.getSelection();

         if (!selection.isCollapsed) {

          selection.deleteFromDocument();

         }

         selection.getRangeAt(0).insertNode(element);

        }

        winFile.close();

       },

       failure : function() {

        form.reset();

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

         Ext.MessageBox.alert('警告',

           '上传失败，仅支持上传doc、xls格式的文件!');

       

       }

      

      });

     }

    }, {

     text : '关闭',

     type : 'submit',

     handler : function() {

      winFile.close(this);

     }

    }]

   })

var winFile = new Ext.Window({

      title : "上传附件",

      id : 'picwin',

      width : 400,

      height : 120,

      modal : true,

      border : false,

      layout : "fit",

      iconCls : 'icon-uploadfile',

      items : fileform

});

   winFile.show();

  

},//上传附件的扩展
addflash : function() {

   var editor = this;

   var flashform = new Ext.FormPanel({

    region : 'center',

    labelWidth : 55,

    frame : true,

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

    autoScroll : true,

    border : false,

    items : [{

       xtype : 'textfield',

       fieldLabel : 'flash地址',

       name : 'userflash',

       id : 'userflash',

       allowBlank : false,

       blankText : 'http://',

       emptyText : 'http://',

       height : 25,

       anchor : '98%'

      }],

    buttons : [{

     text : '添加',

     type : 'submit',

     handler : function() {

      var furl="";//文件物理地址

      furl=flashform.form.findField('userflash').getValue();

      var type=furl.substring(furl.length-3).toLowerCase();

      if (furl==""||furl==null) {return;}

      if(type!='swf'&&type!='flv'){

       alert('非法格式，请检查！');

       return;

      }

      var element = document.createElement("embed");

      element.src = furl;

      element.type="application/x-shockwave-flash";

      element.quality="high";

      element.style.width="300px";

      element.style.height="200px";

      if(Ext.isIE) {

       editor.insertAtCursor(element.outerHTML);

      } else {

        var selection = editor.win.getSelection();

        if (!selection.isCollapsed) {

            selection.deleteFromDocument();

        }

        selection.getRangeAt(0).insertNode(element);

      }

      winflash.close();

     }

    }, {

     text : '关闭',

     type : 'submit',

     handler : function() {

      winflash.close(this);

     }

    }]

   })

var winflash = new Ext.Window({

      title : "插入flash",

      id : 'flashwin',

      width : 400,

      height : 120,

      modal : true,

      border : false,

      layout : "fit",

      iconCls : 'icon-swf',

      items : flashform

});

   winflash.show();

  

},//插入flash的扩展

addfilm : function() {

   var editor = this;

   var filmform = new Ext.FormPanel({

    region : 'center',

    labelWidth : 70,

    frame : true,

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

    autoScroll : true,

    border : false,

    items : [{

       xtype : 'textfield',

       fieldLabel : '多媒体地址',

       name : 'userfilm',

       id : 'userfilm',

       allowBlank : false,

       blankText : 'http://',

       emptyText : 'http://',

       height : 25,

       anchor : '98%'

      }],

    buttons : [{

     text : '添加',

     type : 'submit',

     handler : function() {

      var furl="";//文件物理地址

      var regImg = new RegExp(/\.(mp3|wav|wma|wmv|avi|mpg|asf|rm|rmvb)$/);

      var regrm=new RegExp(/\.(rm|rmvb)$/);

      furl=filmform.form.findField('userfilm').getValue();

      //var type=furl.substring(furl.length-3).toLowerCase();

      if (furl==""||furl==null) {return;}

      if(!furl.match(regImg)){

       alert('非法格式，请检查！系统支持：mp3,wav,wma,wmv,avi,mpg,asf,rm,rmvb');

       return;

      }

      var element = document.createElement("embed");

      element.src = furl;

      element.style.width="300px";

      element.style.height="200px";

      if(furl.match(regrm))

         element.type="audio/x-pn-realaudio-plugin";

      else

         element.type="video/x-ms-asf-plugin";

      element.loop="true";

      element.autostart="true";

      if(Ext.isIE) {

       editor.insertAtCursor(element.outerHTML);

      } else {

        var selection = editor.win.getSelection();

        if (!selection.isCollapsed) {

            selection.deleteFromDocument();

        }

        selection.getRangeAt(0).insertNode(element);

      }

      winfilm.close();

     }

    }, {

     text : '关闭',

     type : 'submit',

     handler : function() {

      winfilm.close(this);

     }

    }]

   })

var winfilm = new Ext.Window({

      title : "插入多媒体",

      id : 'filmwin',

      width : 410,

      height : 120,

      modal : true,

      border : false,

      layout : "fit",

      iconCls : 'icon-film',

      items : filmform

});

   winfilm.show();

  

},//插入过媒体的扩展
createToolbar : function(editor) {

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

   this.tb.insertButton(16, {

      cls : "x-btn-icon",

      iconCls : "icon-uploadpic",

      handler : this.addImage,

      tooltip : "添加图片",

      scope : this

     });

   this.tb.insertButton(17, {

      cls : "x-btn-icon",

      iconCls : 'icon-uploadfile',

      handler : this.addFile,

      tooltip : "添加文件",

      scope : this

     });

     this.tb.insertButton(18, {

      cls : "x-btn-icon",

      iconCls : 'icon-swf',

      handler : this.addflash,

      tooltip : "添加flash文件",

      scope : this

     });

     this.tb.insertButton(19, {

      cls : "x-btn-icon",

      iconCls : 'icon-film',

      handler : this.addfilm,

      tooltip : "添加多媒体文件",

      scope : this

     });

  this.tb.insertButton(20, {//插入层的扩展，即插入div

      cls : "x-btn-icon",

      iconCls : 'icon-div',

      handler : function() {

         var element = document.createElement("div");

         element.id="InsertDiv";

         element.style.backgroundColor="#FAFAFB";

         element.style.borderWidth="1px";

         element.style.borderStyle="solid";

         element.style.borderColor="#AECBE7";

         element.innerHTML="在此插入内容：<BR>";

         if(Ext.isIE) {

       editor.insertAtCursor(element.outerHTML);

      } else {

        var selection = editor.win.getSelection();

        if (!selection.isCollapsed) {

            selection.deleteFromDocument();

        }

        selection.getRangeAt(0).insertNode(element);

      }

      },

      tooltip : "添加div层",

      scope : this

     });
     this.tb.insertButton(21, { //插入横线的扩展

      cls : "x-btn-icon",

      iconCls : 'icon-hr',

      handler :function() {

         var element = document.createElement("HR");

         if(Ext.isIE) {

       editor.insertAtCursor(element.outerHTML);

      } else {

        var selection = editor.win.getSelection();

        if (!selection.isCollapsed) {

            selection.deleteFromDocument();

        }

        selection.getRangeAt(0).insertNode(element);

      }

      },

      tooltip : "添加横线",

      scope : this

     });
}

});

Ext.reg('CJ_starthtmleditor', HTMLEditor);

大家可以根据这个方法继续扩展自己想要的东西。

上面上传图片和附件有一个方法，内容如下：

//上传文件

        [AcceptVerbs(HttpVerbs.Post)]

        public ActionResult AddFiles_newsinfo(FormCollection collection)

        {

            var rdto = new ResultDTO();

            var c = Request.Files[0];

            if (c != null && c.ContentLength > 0)

            {

                string filename = c.FileName;

                string destination = Server.MapPath("/UploadFile/");

                c.SaveAs(destination+ filename);

            }

            return null;

        }

使用的时候，首先在页面中添加该js的引用，然后，在需要的地方加入以下代码：

{

                            border : false,

                            columnWidth : 1,

                            layout : 'form',

                            items : [{

                               fieldLabel : '信息内容',

                               xtype : 'CJ_starthtmleditor',

                               name : 'nr',

                               id : 'nr',

                               allowBlank : false,

                               anchor : '98%' 

                              }]

}

Extjs 扩展Htmleditor，支持 图片上传 文件上传 插入flash 插入多媒体 插入层 插入横线等功能相关推荐

1. Extjs 扩展Htmleditor，支持 图片上传 文件上传 插入flash 插入多媒体 插入层 插入横线等功能...

   去年对Extjs的富文本框编辑器htmleditor做过扩展,扩展成图片上传和文件上传功能,感觉功能还是不够,原文如下: http://hi.baidu.com/jackvoilet/blog/ite ...

2. 电脑版终于来了：不限速，支持单个30G大文件上传

   微信搜索逆锋起笔关注后回复编程pdf 领取编程大佬们所推荐的 23 种编程资料! 阿里云盘上传下载不限速,一直备受关注.不过还在公测阶段,官方也没有上线 PC 客户端. 大家期待的阿里云盘桌面端终于上 ...

3. Java图片上传/文件上传

   图片上传/文件上传 1. 创建一个web项目 新建一个JSP <%@ page language="java" import="java.util.*" ...

4. android webview 多文件上传,Android中的webview支持页面中的文件上传实例代码

   Android webview在默认情况下是不支持网页中的文件上传功能的: 如果在网页中有,在android webview中访问时也会出现浏览文件的按钮 但是点击按钮之后没有反应... 那么如何能够 ...

5. python 全栈开发，Day86(上传文件,上传头像,CBV,python读写Excel,虚拟环境virtualenv)

   python 全栈开发,Day86(上传文件,上传头像,CBV,python读写Excel,虚拟环境virtualenv) 一.上传文件 上传一个图片 使用input type="file& ...

6. “图片”--上传(文件上传一致，单文件)

   html代码: <form action="GoodsAction_modify.do" method="post" enctype="mult ...

7. Android头像(图片)上传/文件上传

   1.前言 作为初学者来说,想必对上传的数据格式肯定比较模糊,一般传递参数给后台,常用的是使用基本数据类型拼装成json格式.头像上传也可以使用String类型进行上传(极客学院有相关的视频,可以自行了 ...

8. 弹性服务器怎么上传文件,上传哪个文件夹弹性云服务器

   上传哪个文件夹弹性云服务器 内容精选 换一换 华为云帮助中心,为用户提供产品简介.价格说明.购买指南.用户指南.API参考.最佳实践.常见问题.视频帮助等技术文档,帮助您快速上手使用华为云服务. 本节 ...

9. putty上传文件到linux_基于windows安装部署putty小工具及相关功能介绍

   概述 PuTTY是一个Telnet.SSH.rlogin.纯TCP以及串行接口连接软件.较早的版本仅支持Windows平台,在最近的版本中开始支持各类Unix平台,并打算移植至Mac OS X上.除了 ...

最新文章

1. 力扣(LeetCode)刷题，简单题(第3期)
2. 【c语言】输入两个数，交换这两个数后，再输出
3. Java中的线程和同步
4. 启明云端分享|干货来了，怎么用ESP32-S2驱动断码屏呢？更多干货欢迎关注启明云端CSDN技术社区！
5. CompletableFuture 创建异步对象
6. JS - JSON对象与JSON字符串相互转换的几种方法
7. FPGA开发全攻略—— 调试
8. java 大文件下载_Java大文件下载不全问题
9. 虚拟机与主机串口通信（主机与主机）
10. Centos7 连接Serial串口记录
11. 易宝支付银行接口，各参数
12. PAT 甲级1069/乙级 1019 PAT Ranking 个人错误总结
13. 中西方对时间的差异_中西方文化交际中时间观的差异对比
14. 【有利可图网】PS实战系列：简单易学的PS把照片转素描效果
15. 龙智集团赢得2022年Atlassian与AWS云销售竞赛
16. uboot源码学习（8）DDR内存时序参数
17. Linux系统调用之SYSCALL_DEFINE
18. 人工神经网络评价法案例_人工神经网络应用实例
19. Spring JDBC 访问数据库
20. Windows内网穿透远程桌面：公网远程桌面控制内网电脑 2/3

热门文章

1. 国产操作系统——中科方德桌面操作系统
2. 【Docker】镜像原理，docker commit
3. MTI雷达原理的学习
4. netflow流量分析工具 linux,Linux安装Nfdump和Nfsen图形界面分析netflow数据
5. ScriptManager的用法
6. Docker学习笔记六：Docker搭建企业级私有仓库
7. ERA5 积雪 降雪 区别_“雪走霾来” 河南降雪今夜停止 19-24日将迎雾霾天
8. 跳槽——找马时，我被驴发现了 1
9. 面向程序员的精品开源字体：让代码更易读、更美观、更实用
10. Java IO源码分析（四）——PrintStream