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. Springmvc数据校验

    步骤一:导入四个jar包 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=" ...

  2. html与html5

    HTML 是一种在 Web 上使用的通用标记语言.HTML 允许你格式化文本,添加图片,创建链接.输入表单.框架和表格等等,并可将之存为文本文件,浏览器即可读取和显示.HTML 的关键是标签,其作用是 ...

  3. Python自然语言处理工具小结

    Python自然语言处理工具小结 作者:白宁超 2016年11月21日21:45:26 目录 [Python NLP]干货!详述Python NLTK下如何使用stanford NLP工具包(1) [ ...

  4. 动手做第一个Chrome插件

    Chrome插件是令人惊讶的简单,一旦你弄懂它的工作和实现原理.它是由一部分HTML,一部分Js,然后混合了一个叫做manifest.json的Json文件组合而成的整体.这意味着你可以使用你最擅长的 ...

  5. web 前端（轮番插件）

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  6. 【JQ基础】数组

    each() 方法规定为每个匹配元素规定运行的函数.

  7. SharePoint 2016 入门视频教程

    之前一直有朋友让自己录一些SharePoint的入门视频,之前没有太多时间,一个巧合的机会收到CSDN学院的邮件,可以在CSDN上发布视频教程,自己就录了一些.说起录视频也是蛮辛苦的,每天下班吃完饭要 ...

  8. linux之查看系统命令

    cpu信息 1.查看逻辑cpu核数 # cat /proc/cpuinfo| grep "processor"| wc -l 2.查看物理cpu个数 # cat /proc/cpu ...

  9. Struts2数据校验

    Struts2数据校验 1.常见数据校验方法 表单数据的校验方式: 表单中的数据必须被效验以后才能够被使用,常用的效验方式分为两种: 前台校验:也称之为客户端效验,主要是通过JS编程的方式进行表单数据 ...

  10. Object是什么

    Object是什么 .Net程序员们每天都在和Object在打交道如果你问一个.Net程序员什么是Object,他可能会信誓旦旦的告诉你"Object还不简单吗,就是所有类型的基类" ...