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. 微软.NET Core RC2正式发布，横跨所有平台

    .NET官方博客宣布了<Announcing .NET Core RC2 and .NET Core SDK Preview 1>,正式如期发布了.NET Core RC2, 现在可以放心 ...

  2. Unity游戏内版本更新

    最近研究了一下游戏内apk包更新的方法. ios对于应用的管理比较严格,除非热更新脚本,不太可能做到端内大版本包的更新.然而安卓端则没有此限制.因此可以做到不跳到网页或应用商店,就覆盖更新apk包. ...

  3. C语言 · 查找整数 · 基础练习

    问题描述 给出一个包含n个整数的数列,问整数a在数列中的第一次出现是第几个. 输入格式 第一行包含一个整数n. 第二行包含n个非负整数,为给定的数列,数列中的每个数都不大于10000. 第三行包含一个 ...

  4. BIOS中未启用虚拟化支持系列~~例如：因此无法安装Hyper-V

    异常处理汇总-服务器系列:http://www.cnblogs.com/dunitian/p/4522983.html 一般都是启动一下CUP虚拟化就可以了 比如华硕的:

  5. ASP.NET MVC5+EF6+EasyUI 后台管理系统（69）-微信公众平台开发-功能概述

    系列目录 为什么要先发这个文章? 因为接下来的文章是关于微信开发的系列,心中一定要有一个概念,知道自己接下来要做什么功能. 而且微信到处都是坑,我首先要把微信与本地跑通起来才敢发布,否则中间出现坑导致 ...

  6. SDWebImage源码解读之SDWebImageCache(上)

    第五篇 前言 本篇主要讲解图片缓存类的知识,虽然只涉及了图片方面的缓存的设计,但思想同样适用于别的方面的设计.在架构上来说,缓存算是存储设计的一部分.我们把各种不同的存储内容按照功能进行切割后,图片缓 ...

  7. JavaScript基础知识总结（四）

    JavaScript语法 八.函数 函数就是完成某个功能的一组语句,函数由关键字function + 函数名 + 加一组参数定义: 函数在定义后可以被重复调用,通常将常用的功能写成一个函数,利用函数可 ...

  8. Mybatis批量删除

    <delete id="deleteByStandardIds"> delete from t_standard_catalog where standard_id i ...

  9. Java集合类--温习笔记

    最近面试发现自己的知识框架有好多问题.明明脑子里知道这个知识点,流程原理也都明白,可就是说不好,不知道是自己表达技能没点,还是确实是自己基础有问题.不管了,再巩固下基础知识总是没错的,反正最近空闲时间 ...

  10. 【教程】SQLite数据库修复

    SQLite 大家都知道,就不多说了. 有时候数据量大了,或者存储过程中出现异常,数据库就可能会出问题. 这是以前公司产品出现过的问题,导致软件都打不开了,我花了不少时间才解决的,趁现在有空贡献出来. ...