LoT.UI汇总：http://www.cnblogs.com/dunitian/p/4822808.html#lotui

上次说的是强大的百度编辑器 http://www.cnblogs.com/dunitian/p/5551701.html 这次说下简洁版而又不失功能的WangEditor

先看看效果

基本上常用功能都有了，下面说下完整的demo：

前端案例：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>WangEditor</title>

    <meta charset="utf-8" />

    <link href="Script/WangEditor/css/wangEditor.min.css" rel="stylesheet" />

</head>

<body>

    <div id="edit" style="min-height:20em"></div>

    <br />

    <input id="btn1" type="button" value="获取HTML" />  

    <input id="btn2" type="button" value="获取Text" />

    <div id="msg"></div>

    <script src="//cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

    <script src="Script/jquery-1.8.3.min.js"></script>

    <script src="Script/WangEditor/js/wangEditor.min.js"></script>

    <script type="text/javascript">

        var editor = new wangEditor('edit');

        // 上传图片路径

        editor.config.uploadImgUrl = '/Home/Upload';

        // 设置统一参数名

        editor.config.uploadImgFileName = 'file';

        //编辑器创建

        editor.create();

        $('#btn1').click(function () {

            // 获取编辑器区域完整html代码

            var html = editor.$txt.html();

            $('#msg').html(html);

        });

        $('#btn2').click(function () {

            // 获取编辑器纯文本内容

            var text = editor.$txt.text();

            // 获取格式化后的纯文本

            //var formatText = editor.$txt.formatText();

            $('#msg').html(text);

        });

    </script>

</body>

</html>

后端代码：（自己写的，如果有什么问题欢迎联系我）

/// <summary>

        /// 图片上传

        /// </summary>

        /// <returns></returns>

        public ContentResult Upload(HttpPostedFileBase file)

        {

            if (file == null) { return Content("error|文件不能为空"); }

            if (file.ContentLength > 10485760) { return Content("error|文件10M以内"); }

            //如果是上传文件，再添加其他格式即可

            string filterStr = ".gif,.jpg,.jpeg,.bmp,.png";

            string fileExt = Path.GetExtension(file.FileName).ToLower();

            if (!filterStr.Contains(fileExt)) { return Content("error|文件后缀不对"); }

            //防止黑客恶意绕过，从根本上判断下文件后缀

            if (!file.InputStream.CheckingExt())

            {

                //todo：一次危险记录

                return Content("error|文件后缀不对");

            }

            //todo: md5判断一下文件是否已经上传过,如果已经上传直接返回 return Content(缩略图地址#sqlPath);

            string path = string.Format("{0}/{1}", "/lotFiles", DateTime.Now.ToString("yyyy-MM-dd"));

            string fileName = string.Format("{0}{1}", Guid.NewGuid().ToString("N"), fileExt);

            string sqlPath = string.Format("{0}/{1}", path, fileName);

            string dirPath = Request.MapPath(path);

            if (!Directory.Exists(dirPath)) { Directory.CreateDirectory(dirPath); }

            try

            {

                //todo：未来写缩略图的代码

                file.SaveAs(Path.Combine(dirPath, fileName));

                //todo: 未来写存数据库的Code

            }

            catch { return Content("error|文件保存失败"); }

            return Content(string.Format("{0}#{1}", sqlPath, sqlPath));//第一个sqlPath以后换成缩略图的地址

        }
/// <summary>

    /// 判断扩展名是否是指定类型---默认是判断图片格式，符合返回true（没有释放stream，请手动：file.InputStream.Dispose();）

    /// eg：图片+压缩+文档："7173", "255216", "6677", "13780", "8297", "55122", "8075", "208207"

    /// eg：img，"7173", "255216", "6677", "13780" //gif  //jpg  //bmp //png

    /// eg：file,"8297", "55122", "8075", "208207" //rar //7z //zip + 文档系列

    /// </summary>

    /// <param name="stream">文件流</param>

    /// <param name="fileTypes">文件扩展名</param>

    /// <returns></returns>

    public static bool CheckingExt(this Stream stream, params string[] fileTypes)

    {

        if (fileTypes == null || fileTypes.Length == 0) { fileTypes = new string[] { "7173", "255216", "6677", "13780" }; }

        bool result = false;

        string fileclass = "";

        #region 读取头两个字节

        var reader = new BinaryReader(stream);

        byte[] buff = new byte[2];

        try

        {

            reader.Read(buff, 0, 2);//读取每个文件的头两个字节

            fileclass = buff[0].ToString() + buff[1].ToString();

        }

        catch (System.Exception ex) { stream.Dispose(); reader.Dispose(); return false; }

        #endregion

        #region 校验

        for (int i = 0; i < fileTypes.Length; i++)

        {

            if (fileclass == fileTypes[i])

            {

                result = true;

                break;

            }

        }

        #endregion

        return result;

    }

完整demo：https://github.com/dunitian/LoTCodeBase/tree/master/NetCode/3.常用技能/03.Editor/03.WangEditor

07.LoT.UI 前后台通用框架分解系列之——轻巧的文本编辑器的更多相关文章

  1. 07.LoT.UI 前后台通用框架分解系列之——强大的文本编辑器

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  2. 04.LoT.UI 前后台通用框架分解系列之——轻巧的弹出框

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  3. 08.LoT.UI 前后台通用框架分解系列之——多样的Tag选择器

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  4. 06.LoT.UI 前后台通用框架分解系列之——浮夸的图片上传

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  5. 01.LoT.UI 前后台通用框架分解系列之——小图片背景全屏显示（可自动切换背景）

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  6. 02.LoT.UI 前后台通用框架分解系列之——灵活的菜单栏

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  7. 03.LoT.UI 前后台通用框架分解系列之——多样的表格

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  8. 05.LoT.UI 前后台通用框架分解系列之——漂亮的时间选择器

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  9. js ui框架 My97日期控件 富文本编辑器

    My97日期控件 http://www.my97.net/dp/index.asp 富文本编辑器 http://www.kindsoft.net/demo.php 百度的magic也不错 http:/ ...

随机推荐

  1. 采用MiniProfiler监控EF与.NET MVC项目(Entity Framework 延伸系列1)

    前言 Entity Framework 延伸系列目录 今天来说说EF与MVC项目的性能检测和监控 首先,先介绍一下今天我们使用的工具吧. MiniProfiler~ 这个东西的介绍如下: MVC Mi ...

  2. Socket聊天程序——客户端

    写在前面: 上周末抽点时间把自己写的一个简单Socket聊天程序的初始设计和服务端细化设计记录了一下,周二终于等来毕业前考的软考证书,然后接下来就是在加班的日子度过了,今天正好周五,打算把客户端的详细 ...

  3. 关于全局ID，雪花（snowflake）算法的说明

    上次简单的说一下:http://www.cnblogs.com/dunitian/p/6041745.html#uid C#版本的国外朋友已经封装了,大家可以去看看:https://github.co ...

  4. 120项改进：开源超级爬虫Hawk 2.0 重磅发布！

    沙漠君在历时半年,修改无数bug,更新一票新功能后,在今天隆重推出最新改进的超级爬虫Hawk 2.0! 啥?你不知道Hawk干吗用的? 这是采集数据的挖掘机,网络猎杀的重狙!半年多以前,沙漠君写了一篇 ...

  5. 程序猿都没对象，JS竟然有对象？

    现在做项目基本是套用框架,不论是网上的前端还是后端框架,也会寻找一些封装好的插件拿来即用,但还是希望拿来时最好自己过后再回过头了解里面的原理,学习里面优秀的东西,不论代码封装性,还是小到命名. 好吧, ...

  6. bash字符串操作

    参考 http://www.cnblogs.com/chengmo/archive/2010/10/02/1841355.html 问题:bash怎么提取字符串的最后一位?例如python中strin ...

  7. Oracle：一个用户操作多个表空间中表的问题（转）

    原文地址:http://blog.csdn.net/shmiloy001/article/details/6287317 首先,授权给指定用户. 一个用户的默认表空间只能有一个,但是你可以试下用下面的 ...

  8. 我的MYSQL学习心得（十七） 复制

    我的MYSQL学习心得(十七) 复制 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据 ...

  9. 一步步开发自己的博客 .NET版（5、Lucenne.Net 和 必应站内搜索）

    前言 这次开发的博客主要功能或特点:    第一:可以兼容各终端,特别是手机端.    第二:到时会用到大量html5,炫啊.    第三:导入博客园的精华文章,并做分类.(不要封我)    第四:做 ...

  10. 菜鸟在C语言编译，链接时可能遇到的两个问题

    最近在看 CSAPP (Computer Systems A Programmers Perspective 2nd) 的第七章 链接.学到了点东西,跟大家分享.下文中的例子都是出自CSAPP第七章. ...