无废话ExtJs 入门教程十四[文本编辑器：Editor]
ExtJs自带的编辑器没有图片上传的功能，大部分时候能够满足我们的需要。
但有时候这个功能还是需要的。我在这里对keeditor进行了整合。
首先要下载keeditor和上传时需要引用的LitJson.dll。由于ke的版本不同，我这里提供的下载文件只适用于当前整合代码，供参考。
1.代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <!--ExtJs框架开始-->
6 <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>
7 <script type="text/javascript" src="/Ext/ext-all.js"></script>
8 <script src="/Ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
9 <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" />
10 <!--ExtJs框架结束-->
11 <!--添加KeEditor的引用开始-->
12 <script src="/kindeditor/kindeditor.js" type="text/javascript"></script>
13 <!--添加KeEditor的引用结束-->
14 <script type="text/javascript">
15 Ext.onReady(function () {
16 //初始化标签中的Ext:Qtip属性。
17 Ext.QuickTips.init();
18 Ext.form.Field.prototype.msgTarget = 'side';
19
20 //创建文本上传域
21 var exteditor = new Ext.form.HtmlEditor({
22 fieldLabel: '员工描述'
23 });
24 //整合KE编辑器
25 var keeditor = new Ext.form.TextArea({
26 id: 'keeditor',
27 fieldLabel: '员工描述',
28 width: 700,
29 height: 200
30 });
31
32 //表单
33 var form = new Ext.form.FormPanel({
34 frame: true,
35 title: '表单标题',
36 style: 'margin:10px',
37 items: [exteditor, keeditor],
38 listeners: {
39 'render': function () {
40 KE.show({
41 id: 'keeditor',
42 imageUploadJson: '/App_Ashx/Upload.ashx'
43 });
44 setTimeout("KE.create('keeditor');", 1000);
45 }
46 }
47 });
48 //窗体
49 var win = new Ext.Window({
50 title: '窗口',
51 width: 900,
52 height: 700,
53 resizable: true,
54 modal: true,
55 closable: true,
56 maximizable: true,
57 minimizable: true,
58 buttonAlign: 'center',
59 items: form
60 });
61 win.show();
62 });
63 </script>
64 </head>
65 <body>
66 <!--
67 说明：
68 (1) var exteditor = new Ext.form.HtmlEditor():创建一个新的html编辑器。
69 (2) var keeditor = new Ext.form.TextArea()：创建一个新的TextArea。
70 (3) listeners: {
71 'render': function () {
72 KE.show({
73 id: 'keeditor',
74 imageUploadJson: '/App_Ashx/Upload.ashx'
75 });
76 setTimeout("KE.create('keeditor');", 1000);
77 }
78 }
79 监听表单的 render 事件，创建 KE Editor.(2)，(3)中的id 要统一，否则无法显示。
80 imageUploadJson: '/App_Ashx/Upload.ashx'，keeditor上传图片的后台执行文件
81 -->
82 </body>
83 </html>
其中与service交互用上传图片的 一般处理程序文件，源码如下：
/App_Ashx/Upload.ashx
1 using System;
2 using System.Collections.Generic;
3 using System.Collections;
4 using System.IO;
5 using System.Web;
6 using System.Globalization;
7 using LitJson;
8
9 namespace HZYT.ExtJs.WebSite.App_Ashx
10 {
11 /// <summary>
12 /// Upload 的摘要说明
13 /// </summary>
14 public class Upload : IHttpHandler
15 {
16 //文件保存目录路径
17 private string savePath = App_Code.Constant.UPLOADIMAGEPATH;
18 //文件保存目录URL
19 private string saveUrl = App_Code.Constant.UPLOADIMAGEPATH;
20 //定义允许上传的文件扩展名
21 private String fileTypes = "gif,jpg,jpeg,png,bmp";
22 //最大文件大小
23 private int maxSize = 1000000;
24
25 private HttpContext context;
26
27 public void ProcessRequest(HttpContext context)
28 {
29 this.context = context;
30
31 HttpPostedFile imgFile = context.Request.Files["imgFile"];
32 if (imgFile == null)
33 {
34 showError("请选择文件。");
35 }
36
37 String dirPath = context.Server.MapPath(savePath);
38 if (!Directory.Exists(dirPath))
39 {
40 showError("上传目录不存在。");
41 }
42
43 String fileName = imgFile.FileName;
44 String fileExt = Path.GetExtension(fileName).ToLower();
45 ArrayList fileTypeList = ArrayList.Adapter(fileTypes.Split(','));
46
47 if (imgFile.InputStream == null || imgFile.InputStream.Length > maxSize)
48 {
49 showError("上传文件大小超过限制。");
50 }
51
52 if (String.IsNullOrEmpty(fileExt) || Array.IndexOf(fileTypes.Split(','), fileExt.Substring(1).ToLower()) == -1)
53 {
54 showError("上传文件扩展名是不允许的扩展名。");
55 }
56
57 String newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt;
58 String filePath = dirPath + newFileName;
59
60 imgFile.SaveAs(filePath);
61
62 String fileUrl = saveUrl + newFileName;
63
64 Hashtable hash = new Hashtable();
65 hash["error"] = 0;
66 hash["url"] = fileUrl;
67 context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8");
68 context.Response.Write(JsonMapper.ToJson(hash));
69 context.Response.End();
70 }
71
72 private void showError(string message)
73 {
74 Hashtable hash = new Hashtable();
75 hash["error"] = 1;
76 hash["message"] = message;
77 context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8");
78 context.Response.Write(JsonMapper.ToJson(hash));
79 context.Response.End();
80 }
81
82 public bool IsReusable
83 {
84 get
85 {
86 return true;
87 }
88 }
89 }
90 }
2.效果如下：
文件下载:
无废话ExtJs 入门教程十四[文本编辑器：Editor]的更多相关文章
- 无废话ExtJs 入门教程十五[员工信息表Demo：AddUser]
无废话ExtJs 入门教程十五[员工信息表Demo:AddUser] extjs技术交流,欢迎加群(201926085) 前面我们共介绍过10种表单组件,这些组件是我们在开发过程中最经常用到的,所以一 ...
- 无废话ExtJs 入门教程十九[API的使用]
无废话ExtJs 入门教程十九[API的使用] extjs技术交流,欢迎加群(201926085) 首先解释什么是 API 来自百度百科的官方解释:API(Application Programmin ...
- 无废话ExtJs 入门教程十[单选组：RadioGroup、复选组：CheckBoxGroup]
无废话ExtJs 入门教程十[单选组:RadioGroup.复选组:CheckBoxGroup] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个单选组,一个复 ...
- 无废话ExtJs 入门教程十六[页面布局：Layout]
无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...
- 无废话ExtJs 入门教程十二[下拉列表联动：Combobox_Two]
无废话ExtJs 入门教程十二[下拉列表联动:Combobox_Two] extjs技术交流,欢迎加群(201926085) 不管是几级下拉列表的联动实现本质上都是根据某个下拉列表的变化,去动态加载其 ...
- 34.无废话ExtJs 入门教程十八[树：TreePanel]
转自:https://www.cnblogs.com/iamlilinfeng/archive/2012/06/28/2566350.html 1. <!DOCTYPE html PUBLIC ...
- 无废话ExtJs 入门教程二十[数据交互：AJAX]
无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
- 无废话ExtJs 入门教程五[文本框：TextField]
无废话ExtJs 入门教程五[文本框:TextField] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个两个文本框.如下所示代码区的第42行位置,items: ...
- 无废话ExtJs 入门教程四[表单：FormPanel]
无废话ExtJs 入门教程四[表单:FormPanel] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在窗体里加了个表单.如下所示代码区的第28行位置,items:form. ...
随机推荐
- TMethod
onclick是TNotifyEvent类型; type TNotifyEvent = procedure(Sender: TObject) of object; 就是说他是一个过 ...
- 应用HTK搭建语音拨号系统2：创建单音素HMM模型
选自:http://maotong.blog.hexun.com/6204849_d.html 苏统华 哈尔滨工业大学人工智能研究室 2006年10月30日 声明:版权所有,转载请注明作者和来源 该系 ...
- ubuntu 13.10 skype登不上问题
首先打开sources.list sudo gedit /etc/apt/sources.list 如果是13.10添加源: deb http://archive.canonical.com/ubun ...
- 写一个迷你版Smarty模板引擎，对认识模板引擎原理非常好（附代码）
前些时间在看创智博客韩顺平的Smarty模板引擎教程,再结合自己跟李炎恢第二季开发中CMS系统写的tpl模板引擎.今天就写一个迷你版的Smarty引擎,虽然说我并没有深入分析过Smarty的源码,但是 ...
- selenium web driver 配合使用testng
首先为eclipse添加testng插件 步骤如下:help->Install New SoftWare... 2. 添加testng链接,该链接可以在这里找到 For the Eclipse ...
- 创建一个没有边框的并添加自定义文字的UISegmentedControl
//个性推荐 歌单 主播电台 排行榜 NSArray* promoteArray=@[@"个性推荐",@"歌单",@"主播电台",@&quo ...
- DP:教授逻辑学问题
http://www.zhihu.com/question/23999095#answer-12373156问题来自知乎 2015-08-17 问题描述: 一个教授逻辑学的教授,有三个学生,而且三个学 ...
- form、iframe实现异步上传文件
转载自:http://blog.csdn.net/sunjing21/article/details/4779321 实现主要功能: 页面提供一个上传图片的input file选择框,用于上传某一类型 ...
- HDU 5920 Ugly Problem 高精度减法大模拟 ---2016CCPC长春区域现场赛
题目链接 题意:给定一个很大的数,把他们分为数个回文数的和,分的个数不超过50个,输出个数并输出每个数,special judge. 题解:现场赛的时候很快想出来了思路,把这个数从中间分为两部分,当位 ...
- POJ 2965 The Pilots Brothers' refrigerator
题目链接 题意:一个冰箱上有4*4共16个开关,改变任意一个开关的状态(即开变成关,关变成开)时,此开关的同一行.同一列所有的开关都会自动改变状态.要想打开冰箱,要所有开关全部打开才行. 输入:一个4 ...