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'