ExtJs 入门教程十四[文本编辑器：Editor]

最新推荐文章于 2019-08-29 16:08:00 发布

u014490157

最新推荐文章于 2019-08-29 16:08:00 发布

阅读量694

点赞数

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 }