extjs [文本编辑器：Editor]

yan的图书41 2014-04-25

展开全文

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
    <title></title>
    
    <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="/Ext/ext-all.js"></script>
    <script src="/Ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" />
    
    
    <script src="/kindeditor/kindeditor.js" type="text/javascript"></script>
    
    <script type="text/javascript">
        Ext.onReady(function () {
            //初始化标签中的Ext:Qtip属性。
            Ext.QuickTips.init();
            Ext.form.Field.prototype.msgTarget = 'side';

            //创建文本上传域
            var exteditor = new Ext.form.HtmlEditor({
                fieldLabel: '员工描述'
            });
            //整合KE编辑器
            var keeditor = new Ext.form.TextArea({
                id: 'keeditor',
                fieldLabel: '员工描述',
                width: 700,
                height: 200
            });

//表单
            var form = new Ext.form.FormPanel({
                frame: true,
                title: '表单标题',
                style: 'margin:10px',
                items: [exteditor, keeditor],
                listeners: {
                    'render': function () {
                        KE.show({
                            id: 'keeditor',
                            imageUploadJson: '/App_Ashx/Upload.ashx'
                        });
                        setTimeout("KE.create('keeditor');", 1000);
                    }
                }
            });
            //窗体
            var win = new Ext.Window({
                title: '窗口',
                width: 900,
                height: 700,
                resizable: true,
                modal: true,
                closable: true,
                maximizable: true,
                minimizable: true,
                buttonAlign: 'center',
                items: form
            });
            win.show();
        });
    </script>
</head>
<body>
    
</body>
</html>

其中与service交互用上传图片的一般处理程序文件，源码如下：

/App_Ashx/Upload.ashx

using System;
using System.Collections.Generic;
using System.Collections;
using System.IO;
using System.Web;
using System.Globalization;
using LitJson;

namespace HZYT.ExtJs.WebSite.App_Ashx
{
    /// <summary>
    /// Upload 的摘要说明
    /// </summary>
    public class Upload : IHttpHandler
    {
        //文件保存目录路径
        private string savePath = App_Code.Constant.UPLOADIMAGEPATH;
        //文件保存目录URL
        private string saveUrl = App_Code.Constant.UPLOADIMAGEPATH;
        //定义允许上传的文件扩展名
        private String fileTypes = "gif,jpg,jpeg,png,bmp";
        //最大文件大小
        private int maxSize = 1000000;

private HttpContext context;

        public void ProcessRequest(HttpContext context)
        {
            this.context = context;

            HttpPostedFile imgFile = context.Request.Files["imgFile"];
            if (imgFile == null)
            {
                showError("请选择文件。");
            }

            String dirPath = context.Server.MapPath(savePath);
            if (!Directory.Exists(dirPath))
            {
                showError("上传目录不存在。");
            }

            String fileName = imgFile.FileName;
            String fileExt = Path.GetExtension(fileName).ToLower();
            ArrayList fileTypeList = ArrayList.Adapter(fileTypes.Split(','));

            if (imgFile.InputStream == null || imgFile.InputStream.Length > maxSize)
            {
                showError("上传文件大小超过限制。");
            }

            if (String.IsNullOrEmpty(fileExt) || Array.IndexOf(fileTypes.Split(','), fileExt.Substring(1).ToLower()) == -1)
            {
                showError("上传文件扩展名是不允许的扩展名。");
            }

String newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt;
String filePath = dirPath + newFileName;

imgFile.SaveAs(filePath);

String fileUrl = saveUrl + newFileName;

            Hashtable hash = new Hashtable();
            hash["error"] = 0;
            hash["url"] = fileUrl;
            context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8");
            context.Response.Write(JsonMapper.ToJson(hash));
            context.Response.End();
        }

        private void showError(string message)
        {
            Hashtable hash = new Hashtable();
            hash["error"] = 1;
            hash["message"] = message;
            context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8");
            context.Response.Write(JsonMapper.ToJson(hash));
            context.Response.End();
        }

        public bool IsReusable
        {
            get
            {
                return true;
            }
        }
    }
}

2.效果如下：

无废话extjs