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

简介: LoT.UI汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui 上次说的是强大的百度编辑器 http://www.cnblogs.com/dunitian/p/5551701.

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

作者: 毒逆天
打赏: 18i4JpL6g54yAPAefdtgqwRrZ43YJwAV5z
本文版权归作者和博客园共有。欢迎转载,但必须保留此段声明,且在文章页面明显位置给出原文连接!
目录
相关文章
|
3月前
|
编译器 C# Android开发
Uno Platform 是一个用于构建跨平台应用程序的强大框架,它允许开发者使用 C# 和 XAML 来创建适用于多个平台的应用
Uno Platform 是一个用于构建跨平台应用程序的强大框架,它允许开发者使用 C# 和 XAML 来创建适用于多个平台的应用
317 8
|
4月前
|
容器 iOS开发 Linux
震惊!Uno Platform 响应式 UI 构建秘籍大公开!从布局容器到自适应设计,带你轻松打造跨平台完美界面
【8月更文挑战第31天】Uno Platform 是一款强大的跨平台应用开发框架,支持 Web、桌面(Windows、macOS、Linux)及移动(iOS、Android)等平台,仅需单一代码库。本文分享了四个构建响应式用户界面的最佳实践:利用布局容器(如 Grid)适配不同屏幕尺寸;采用自适应布局调整 UI;使用媒体查询定制样式;遵循响应式设计原则确保 UI 元素自适应调整。通过这些方法,开发者可以为用户提供一致且优秀的多设备体验。
175 0
|
7月前
|
开发工具 Swift iOS开发
利用SwiftUI构建动态用户界面:iOS开发新范式
【4月更文挑战第3天】 随着苹果不断推进其软件开发工具的边界,SwiftUI作为一种新兴的编程框架,已经逐渐成为iOS开发者的新宠。不同于传统的UIKit,SwiftUI通过声明式语法和强大的功能组合,为创建动态且响应式的用户界面提供了一种更加简洁高效的方式。本文将深入探讨如何利用SwiftUI技术构建具有高度自定义能力和响应性的用户界面,并展示其在现代iOS应用开发中的优势和潜力。
|
前端开发 开发者 UED
前端封装库/工具库的UI框架之Semantic UI
随着前端技术的不断发展,前端开发也越来越受到了重视。而在前端开发过程中,UI框架是不可或缺的一部分。Semantic UI 是一个流行的、现代化的 UI 框架,它为前端开发者提供了一套丰富、易用的组件库和样式表。
463 0
|
前端开发 JavaScript 开发者
封装库/工具库中重要概念之UI框架
UI(User Interface)框架是前端开发中十分重要的一部分,它提供了各种组件和样式,用于构建页面和用户界面。在前端开发中,封装库/工具库可以帮助我们更加高效地使用 UI 框架。
198 0
|
前端开发 JavaScript IDE
封装库/工具库中重要概念之编辑器
在前端开发中,编辑器(Code Editor)是一项非常重要的工具,它可以帮助我们更加高效地编写和编辑代码。虽然市面上已经有了许多强大的编辑器,但是使用封装库/工具库可以帮助我们更加方便地集成编辑器到我们的项目中
126 0
|
开发者 iOS开发 容器
iOS开发CoreGraphics核心图形框架之五——Patterns模型的应用
iOS开发CoreGraphics核心图形框架之五——Patterns模型的应用
229 0
iOS开发CoreGraphics核心图形框架之五——Patterns模型的应用
|
iOS开发 开发者
iOS开发CoreGraphics核心图形框架之八——层聚合
iOS开发CoreGraphics核心图形框架之八——层聚合
187 0
iOS开发CoreGraphics核心图形框架之八——层聚合
|
存储 关系型数据库 BI