layui富文本编辑器

前景概要：想手动搭建一个个人博客，于是我就开始了想分享一个小功能，layui的富文本编辑器，也就是实现博客的发布以及查看，小菜鸡的我觉得还是有点难度…
不多说直接上代码
1.同样，前台部分

<h2>博客发表页面</h2>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input type="text" id="title" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">封面</label>
            <button type="button" class="layui-btn" id="test1">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
            <div class="layui-upload-list">
                <label class="layui-form-label">展示</label>
                <img class="layui-upload-img" id="demo1" style="width:200px;height:auto;">
                <p id="demoText"></p>
            </div>
        </div>
        <textarea id="demo" style="display: none;height:auto"></textarea>
        <div class="site-demo-button" style="margin-top: 20px; margin-left: 62px;">
            <button class="layui-btn site-demo-layedit" data-type="content">提交</button>
            <button class="layui-btn site-demo-layedit" data-type="text">获取编辑器纯文本内容</button>
        </div>
    </form>

这一部分主要是实现富文本的调用，以及图片的展示
下面为JS代码

<script>
    layui.use(['layedit', 'upload','layer'], function () {
        var layedit = layui.layedit
            , $ = layui.jquery
            , upload = layui.upload
            , layer = layui.layer;
        //图片
        layedit.set({
            uploadImage: {
                url: '@Url.Action("PhotoByText")' //接口url
                ,type:"Post"
            }
        });
        //构建一个默认的编辑器
        var index = layedit.build('demo', {
            height: 500 //设置编辑器高度
        });
        //编辑器外部操作
        var active = {
            content: function () {
                var a = layedit.getContent(index)
                var t=layedit.getText(index);
                a = base64encode(utf16to8(a))
                var b = $("#title").val();
                $.ajax({
                    type: "POST",
                    data: {
                        "title": b,
                        "Bloghtml": a,
                        "url": imageUrl,
                        "Blogtext": t
                    },
                    url: "@Url.Action("SubMess")",
                    success: function (result) {
                        if (result.Success == true) {
                            layer.open({
                                title: "消息",
                                content:"添加成功"
                            })
                        }
                        else {
                            layer.open({
                                title: "消息",
                                content:"添加失败"
                            })
                        }
                    }
                })
            }
        };
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            , url: '@Url.Action("Upload")' //上传接口
            ,before: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result);
                });
                layer.load(); //上传loading
            }
            , done: function (res) {
                //上传完毕回调
                if (res.Result) {
　　　　　　　　　　//新增代码，将回传的图片保存路径进行保存并将图片绑定到上传后图片展示处
                    imageUrl = res.Data;
                    $("#demo2").attr("src", imageUrl);
                    layer.closeAll('loading'); //关闭loading
                }
            }
            , error: function () {
                //请求异常回调
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });

        $('.site-demo-layedit').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
            return false;
        });
    });
    //jQuery实现textarea高度根据内容自适应
        $.fn.extend({
            txtaAutoHeight: function () {
                return this.each(function () {
                    var $this = $(this);
                    if (!$this.attr('initAttrH')) {
                        $this.attr('initAttrH', $this.outerHeight());
                    }
                    setAutoHeight(this).on('input', function () {
                        setAutoHeight(this);
                    });
                });
                function setAutoHeight(elem) {
                    var $obj = $(elem);
                    return $obj.css({ height: $obj.attr('initAttrH'), 'overflow-y': 'hidden' }).height(elem.scrollHeight);
                }
            }
        });

        //调用
        $(function () {
            $("#demo").txtaAutoHeight();
        });
</script>

由于我懒得整理所以全部放一起了，这部分js主要是负责把数据提交给后台添加到sql数据库，还一个功能就是实现富文本编辑器的图片添加以及实例化富文本编辑器（关键部分我都加了注释）
需要注意接口部分！！！也就是url部分
我在想要不要搞个ajax提交来混一篇博客…
这里需要注意一个问题就是html标签不能传到控制器，所以需要进行base加密然后在控制器进行解密
加密代码如下
这是js的

<script>
    //下面是64个基本的编码
    var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
    var base64DecodeChars = new Array(
        -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,
        -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,
        -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 62, -1, -1, -1, 63,
        52, 53, 54, 55, 56, 57, 58, 59, 60, 61, -1, -1, -1, -1, -1, -1,
        -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,
        15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, -1, -1, -1, -1, -1,
        -1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40,
        41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, -1, -1, -1, -1, -1);
    //编码的方法
    function base64encode(str) {
        var out, i, len;
        var c1, c2, c3;
        len = str.length;
        i = 0;
        out = "";
        while (i < len) {
            c1 = str.charCodeAt(i++) & 0xff;
            if (i == len) {
                out += base64EncodeChars.charAt(c1 >> 2);
                out += base64EncodeChars.charAt((c1 & 0x3) << 4);
                out += "==";
                break;
            }
            c2 = str.charCodeAt(i++);
            if (i == len) {
                out += base64EncodeChars.charAt(c1 >> 2);
                out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
                out += base64EncodeChars.charAt((c2 & 0xF) << 2);
                out += "=";
                break;
            }
            c3 = str.charCodeAt(i++);
            out += base64EncodeChars.charAt(c1 >> 2);
            out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
            out += base64EncodeChars.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
            out += base64EncodeChars.charAt(c3 & 0x3F);
        }
        return out;
    }
    //解码的方法
    function base64decode(str) {
        var c1, c2, c3, c4;
        var i, len, out;
        len = str.length;
        i = 0;
        out = "";
        while (i < len) {

            do {
                c1 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
            } while (i < len && c1 == -1);
            if (c1 == -1)
                break;

            do {
                c2 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
            } while (i < len && c2 == -1);
            if (c2 == -1)
                break;
            out += String.fromCharCode((c1 << 2) | ((c2 & 0x30) >> 4));

            do {
                c3 = str.charCodeAt(i++) & 0xff;
                if (c3 == 61)
                    return out;
                c3 = base64DecodeChars[c3];
            } while (i < len && c3 == -1);
            if (c3 == -1)
                break;
            out += String.fromCharCode(((c2 & 0XF) << 4) | ((c3 & 0x3C) >> 2));

            do {
                c4 = str.charCodeAt(i++) & 0xff;
                if (c4 == 61)
                    return out;
                c4 = base64DecodeChars[c4];
            } while (i < len && c4 == -1);
            if (c4 == -1)
                break;
            out += String.fromCharCode(((c3 & 0x03) << 6) | c4);
        }
        return out;
    }
    function utf16to8(str) {
        var out, i, len, c;
        out = "";
        len = str.length;
        for (i = 0; i < len; i++) {
            c = str.charCodeAt(i);
            if ((c >= 0x0001) && (c <= 0x007F)) {
                out += str.charAt(i);
            } else if (c > 0x07FF) {
                out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
                out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
            } else {
                out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
                out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
            }
        }
        return out;
    }
    function utf8to16(str) {
        var out, i, len, c;
        var char2, char3;
        out = "";
        len = str.length;
        i = 0;
        while (i < len) {
            c = str.charCodeAt(i++);
            switch (c >> 4) {
                case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7:
                    // 0xxxxxxx
                    out += str.charAt(i - 1);
                    break;
                case 12: case 13:
                    // 110x xxxx   10xx xxxx
                    char2 = str.charCodeAt(i++);
                    out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
                    break;
                case 14:
                    // 1110 xxxx  10xx xxxx  10xx xxxx
                    char2 = str.charCodeAt(i++);
                    char3 = str.charCodeAt(i++);
                    out += String.fromCharCode(((c & 0x0F) << 12) |
                        ((char2 & 0x3F) << 6) |
                        ((char3 & 0x3F) << 0));
                    break;
            }
        }
        return out;
    }
</script>

直接加载前台界面就可
关于控制器解密，我们需要重新建一个Base类
代码如下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;

namespace Blog.BaseChange
{
    public class Base
    {
        /// <summary>
        /// Base64加密
        /// </summary>
        /// <param name="input">需要加密的字符串</param>
        /// <returns></returns>
        public static string Base64Encrypt(string input)
        {
            return Base64Encrypt(input, new UTF8Encoding());
        }

        /// <summary>
        /// Base64加密
        /// </summary>
        /// <param name="input">需要加密的字符串</param>
        /// <param name="encode">字符编码</param>
        /// <returns></returns>
        public static string Base64Encrypt(string input, Encoding encode)
        {
            return Convert.ToBase64String(encode.GetBytes(input));
        }

        /// <summary>
        /// Base64解密
        /// </summary>
        /// <param name="input">需要解密的字符串</param>
        /// <returns></returns>
        public static string Base64Decrypt(string input)
        {
            return Base64Decrypt(input, new UTF8Encoding());
        }


        /// <summary>
        /// Base64解密
        /// </summary>
        /// <param name="input">需要解密的字符串</param>
        /// <param name="encode">字符的编码</param>
        /// <returns></returns>
        public static string Base64Decrypt(string input, Encoding encode)
        {
            return encode.GetString(Convert.FromBase64String(input));
        }
    }
}

然后在我们拿到数据时进行数据的解密就可以了

public ActionResult SubMess(string title, string Bloghtml, string url, string Blogtext)
        {
            string Bhtml = Bloghtml.Trim().Replace("%", "").Replace(",", "").Replace(" ", "+");
            if (Bhtml.Length % 4 > 0)
            {
                Bhtml = Bhtml.PadRight(Bhtml.Length + 4 - Bhtml.Length % 4, '=');
            }
            Bhtml = Base.Base64Decrypt(Bhtml);
            try
            {
                blogabout blogabout = new blogabout()
                {
                    title = title,
                    Bloghtml = Bhtml,
                    Imagetitle = url,
                    Blogtext = Blogtext,
                    pushtime = DateTime.Now

                };
                db.blogabout.Add(blogabout);
                db.SaveChanges();
                return Json(new
                {
                    Success = true
                });
            }
            catch (Exception ex)
            {
                return Json(new
                {
                    Success = false,
                    ex.Message
                });
                throw;
            }
        }

对了，还有一个富文本图片上传

public ActionResult PhotoByText(HttpPostedFileBase file)
        {
            EditorDataResult editorResult = new EditorDataResult();
            if (file != null && !string.IsNullOrEmpty(file.FileName))
            {
                string saveAbsolutePath = Server.MapPath("/imgUploads/");
                string saveFileName = Guid.NewGuid().ToString("N") + "_" + file.FileName;
                string fileName = Path.Combine(saveAbsolutePath, saveFileName);
                file.SaveAs(fileName);
                editorResult.code = 0;
                editorResult.msg = "图片上传成功!";
                editorResult.data = new Dictionary<string, string>()
                {
                    {"src","/imgUploads/"+saveFileName },
                    {"title","图片名称" }
                };
            }
            else
            {
                editorResult.code = 1;
                editorResult.msg = "图片上传失败!";
                editorResult.data = new Dictionary<string, string>()
                {
                    {"src","" }
                };
            }
            JavaScriptSerializer jss = new JavaScriptSerializer();
            string data = jss.Serialize(editorResult);//转换为Json格式!

            return Json(data,JsonRequestBehavior.AllowGet);
        }

这样就可以了，本来只是想说富文本编辑器实现图片上传的，好像搞多了。。。
实现富文本编辑器内容回调显示就是直接查找sql数据库中存入的html结构就可以了
回调代码就是简单的数据查找，就不写了。
记得添加imgUpload文件夹
后续我会出一篇博客搭建的文章，后续什么时候我也说不清楚。。。
有问题就评论区留言（可能我也解决不了。。。）