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. SSH实战 · 用spring框架下的hibernatetemplate的get方法出现的问题

    用get方法查询:      return this.getHibernateTemplate().get(Product.class, pid); 出现错误为:id to load is requi ...

  2. OpenCASCADE Job - dimue

  3. Matlab 绘制三维立体图（以地质异常体为例）

    前言:在地球物理勘探,流体空间分布等多种场景中,定位空间点P(x,y,x)的物理属性值Q,并绘制三维空间分布图,对我们洞察空间场景有十分重要的意义. 1. 三维立体图的基本要件: 全空间网格化 网格节 ...

  4. 深究标准IO的缓存

    前言 在最近看了APUE的标准IO部分之后感觉对标准IO的缓存太模糊,没有搞明白,APUE中关于缓存的部分一笔带过,没有深究缓存的实现原理,这样一本被吹上天的书为什么不讲透彻呢?今天早上爬起来赶紧找了 ...

  5. VS项目中使用Nuget还原包后编译生产还一直报错？

    Nuget官网下载Nuget项目包的命令地址:https://www.nuget.org/packages 今天就遇到一个比较奇葩的问题,折腾了很久终于搞定了: 问题是这样的:我的解决方案原本是好好的 ...

  6. WCF基础

    初入职场,开始接触C#,开始接触WCF,那么从头开始学习吧,边学边补充. SOA Service-Oriented Architecture,面向服务架构,粗粒度.开放式.松耦合的服务结构,将应用程序 ...

  7. Java中，异常的处理及抛出

    首先我们需要知道什么是异常? 常通常指,你的代码可能在编译时没有错误,可是运行时会出现异常.比如常见的空指针异常.也可能是程序可能出现无法预料的异常,比如你要从一个文件读信息,可这个文件不存在,程序无 ...

  8. Android 中的mvvm

    我们来了解一下MVVM模式与Databinding ,MVVM是一种模式,Databinding 是一种框架.DataBinding是一个实现数据和UI绑定的框架.而ViewModel和View可以通 ...

  9. (转)从0开始搭建SQL Server AlwaysOn 第一篇（配置域控+域用户DCADMIN）

    原文地址: http://www.cnblogs.com/lyhabc/p/4678330.html 实验环境: 准备工作 软件准备 (1) SQL Server 2012 (2) Windows S ...

  10. Firefox开发者专版浏览器，Web开发者利器.

    2015的11月9日,Firefox迎来了自己的十周岁生日.在庆祝Firefox十周年之际,Mozilla发布了Firefox开发者专版,这是首款专门为开发者打造的浏览器. 浏览器中独特的暗色调设计. ...