无废话ExtJs 入门教程十四[文本编辑器:Editor]

无废话ExtJs 入门教程十四[文本编辑器:Editor]

extjs技术交流,欢迎加群(201926085)

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.效果如下:

文件下载:

keeditor  LitJson.dll

时间: 2024-10-10 10:54:31

无废话ExtJs 入门教程十四[文本编辑器:Editor]的相关文章

无废话ExtJs 入门教程十五[员工信息表Demo:AddUser]

无废话ExtJs 入门教程十五[员工信息表Demo:AddUser] extjs技术交流,欢迎加群(201926085) 前面我们共介绍过10种表单组件,这些组件是我们在开发过程中最经常用到的,所以一定要用到非常熟练才可以,今天我们会通过一个员工信息表实例,再把这些组件串一下. (1)TextField  (2)Botton  (3)NumberField (4)Hidden (5)DataFiedl (6)RadioGroup (7)CheckBoxGroup (8)Combobox (9)F

无废话ExtJs 入门教程十九[API的使用]

无废话ExtJs 入门教程十九[API的使用] extjs技术交流,欢迎加群(201926085) 首先解释什么是 API 来自百度百科的官方解释:API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件的以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节. ExtJs的Api必须部署到IIS上,ExtJS的API首页如下图所示: 左侧是搜索栏,可以搜索所有的Ext的组件,如上图

无废话ExtJs 入门教程十六[页面布局:Layout]

无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distribution;layout] 对事物的全面规划和安排,布:陈设:设置. 我对布局理解是“把**东西放在**位置显示”[动词]. ok,我们这节课就讲一下怎么样把 ExtJs 的组件,放到我们想放置的位置. 一.常用布局 (1)ContainerLayout:默认布局方式,其他布局继承该类进行扩展功能.显示:

无废话ExtJs 入门教程五[文本框:TextField]

无废话ExtJs 入门教程五[文本框:TextField] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个两个文本框.如下所示代码区的第42行位置,items: [txtusername, txtpassword]. 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht

无废话ExtJs 入门教程四[表单:FormPanel]

无废话ExtJs 入门教程四[表单:FormPanel] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在窗体里加了个表单.如下所示代码区的第28行位置,items:form. 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&

无废话ExtJs 入门教程十三[上传图片:File]

无废话ExtJs 入门教程十三[上传图片:File] extjs技术交流,欢迎加群(201926085) 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/199

无废话ExtJs 入门教程二十一[继承:Extend]

无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承”定义在我们定义的新组件中,从而达到重用的目地. 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

无废话ExtJs 入门教程十七[列表:GridPanel]

无废话ExtJs 入门教程十七[列表:GridPanel] extjs技术交流,欢迎加群(201926085) 在Extjs中,GridPanel用于数据显示,即我们平时说的列表页.在本节中,我们先对GridPanel有个基本的认识,后继过程再做Demo练习详细讲解在开发中的应用. 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

无废话ExtJs 入门教程三[窗体:Window组件]

无废话ExtJs 入门教程三[窗体:Window组件] extjs技术交流,欢迎加群(201926085) 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/19