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. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  2. MIP改造常见问题二十问

    在MIP推出后,我们收到了很多站长的疑问和顾虑.我们将所有疑问和顾虑归纳为以下二十个问题,希望对大家理解 MIP 有帮助. 1.MIP 化后对其他搜索引擎抓取收录以及 SEO 的影响如何? 答:在原页 ...

  3. ASP.NET Aries 入门开发教程5：自定义列表页工具栏区

    前言: 抓紧时间,继续写教程,因为发现用户期待的内容,都在业务处理那一块. 不得不继续勤劳了. 这节主要介绍工具栏区的玩法. 工具栏的默认介绍: 工具栏默认包括5个按钮,根据不同的权限决定显示: 添加 ...

  4. Java多线程基础——对象及变量并发访问

    在开发多线程程序时,如果每个多线程处理的事情都不一样,每个线程都互不相关,这样开发的过程就非常轻松.但是很多时候,多线程程序是需要同时访问同一个对象,或者变量的.这样,一个对象同时被多个线程访问,会出 ...

  5. 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert

    使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...

  6. BootStrap_02之全局样式及组件

    1.BootStrap指定的四种屏幕尺寸: ①超大PC屏幕--lg(large):w>=1200px: ②中等PC屏幕--md(medium):1200px>w>=992px: ③P ...

  7. C++中的引用

    一,C++中引用的基础知识 1.引用的基本概念 1.所谓的引用其实就是对变量起“别名”.引用和变量对应得是相同的内存,修改引用的值,变量的值也会改变,和指针类似. 2.引用在定义的时候必须要初始化,初 ...

  8. PHP与API讲解（一）

    了解API: 在使用与创建自己的API之前我们需要先了解什么是API! API代表应用程序编程接口,而接口指的是一个特定的服务.一个应用程序或者其他程序的公共模块. 理解SOA(面向服务的架构):SO ...

  9. vue.js初探

    前言 入手2016最火前端框架之一vue.js.大概从网上找了些资料看了下vue.js,从网上的资料来看只能惊叹其发展速度太快,让我意外的是其作者是华人的前提下作品这么受欢迎. 网上的博客和教程各种组 ...

  10. 小兔Java教程 - 三分钟学会Java文件上传

    今天群里正好有人问起了Java文件上传的事情,本来这是Java里面的知识点,而我目前最主要的精力还是放在了JS的部分.不过反正也不麻烦,我就专门开一贴来聊聊Java文件上传的基本实现方法吧. 话不多说 ...