.net layui富文本编辑器 赋值包括图片 取值 layedit

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Cases_ADD.aspx.cs" Inherits="MyProject.Cases_ADD" %>

<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>编辑</title>
    <link href="/JS/layui/css/layui.css" rel="stylesheet" />
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" />
    <script src="/JS/jquery-3.4.1.js"></script>
    <script src="/layuiadmin/layui/layui.js"></script>
    <script src="/layuiadmin/lib/admin.js"></script>
    <script src="/JS/layui/layui.js"></script>
    <style>
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }

            .file input {
                position: absolute;
                font-size: 100px;
                right: 0;
                top: 0;
                opacity: 0;
            }

            .file:hover {
                background: #AADFFD;
                border-color: #78C3F3;
                color: #004974;
                text-decoration: none;
            }

        .layui-input {
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body" style="padding: 15px;">
                <div class="layui-form-item">
                    <label class="layui-form-label">案例名称</label>
                    <div class="layui-input-block">
                        <input type="text" id="names" lay-verify="names" autocomplete="off" placeholder="请输入案例名称" class="layui-input" value="<%=names %>" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">装修公司</label>
                    <div class="layui-input-block">
                        <div class="layui-form" >
                            <select name="" id="comID" lay-filter="">
                                <option value="0">请选择</option>
                                <%=sbCom.ToString() %>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">案例展示图</label>
                    <div class="layui-input-block">
                        <a href="javascript:;" class="file">选择文件<input type="file" name="" id="image" /></a>
                        <img src="<%=headIMG %>" id="image_show" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" >面积</label>
                    <div class="layui-input-block">
                        <input type="text" id="mianJi" autocomplete="off" class="layui-input" value="<%=mianJi %>" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">预算</label>
                    <div class="layui-input-block">
                        <input type="text" id="yuSuan" autocomplete="off" class="layui-input" value="<%=yuSuan %>"  />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" >户型</label>
                    <div class="layui-input-block">
                        <input type="text" id="huXing" autocomplete="off" class="layui-input" value="<%=huXing %>" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" >
                        风格
                    </label>
                    <div class="layui-input-block">
                        <input type="text" id="fengGe" autocomplete="off" class="layui-input" value="<%=fengGe %>" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" >装修方式</label>
                    <div class="layui-input-block">
                        <input type="text" id="fangShi" autocomplete="off" class="layui-input" value="<%=fangShi %>" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" >详情</label>
                    <div class="layui-input-block">
                        <textarea id="txtaContent" style="display: none;"></textarea>
                    </div>
                </div>
                <div class="layui-form-item layui-layout-admin">
                    <div class="layui-input-block">
                        <div class="layui-footer" style="left: 0;">
                            <button class="layui-btn sim_btn">提交</button>
                            <input type="button" id="btnReset" class="layui-btn layui-btn-primary" value="重置" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="hdid" value="<%=strid %>" />
    <input type="hidden" id="hdHeadIMG" value="<%=headIMG %>" />
    <input type="hidden" id="hdcomID" value="<%=comID %>" />
    <div id="hdContent" style="display:none;"><%=content %></div>
    <script type="text/javascript">
        //这里一定要设置全局变量,不然下面用的时候,未定义
        var layer, form, laypage, laydate, upload, layedit, indexs;
        $(function () {
            layui.use(['index', 'layer', 'form', 'laypage', 'laydate', 'upload', 'jquery', 'layedit'], function () {
                layer = layui.layer;
                form = layui.form;
                laypage = layui.laypage;
                laydate = layui.laydate;
                upload = layui.upload;
                layedit = layui.layedit;//注册layedit
                var $ = layui.jquery;

                //layedit配置开始
                //layedit.set一定要放在 layedit.build 前面,否则配置全局接口将无效。
                layedit.set({
                    uploadImage: {
                        url: 'layeditUPIMG.ashx', //接口url
                        type: 'post' //默认post
                    }
                });
                indexs = layedit.build('txtaContent', {
                    height: 500, // 设置编辑器高度
                });
                //layedit配置结束

                //layedit赋值开始
                var strContent = $("#hdContent").html(); //这里用DIV来临时存值,是因为内容有图片,所以不能用hidden控件
                if (strContent!="") {
                    layedit.setContent(indexs, strContent, false);//flag是true,是追加模式,flag是false,赋值模式
                }
                //layedit赋值结束

                form.render('select');//先渲染select类型控件
                form.on('select', function (data) {
                    $("#hdcomID").val(data.value);
                });
            });


            //提交表单
            $("body").on("click", ".sim_btn", function () {
                saveData();
            });
            //清空文件框
            $("body").on("click", "#btnReset", function () {
                $(":input[type='text']").val("");
            });
            $("#image").change(function () {
                var file = $("#image").get(0).files[0];
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function (e) {
                    // 图片格式为 base64
                    $("#image_show").attr("src", e.target.result);
                }
            });

        });

        function saveData() {
            var errorMsg = "";
            var id = $("#hdid").val();
            var names = $("#names").val();
            var comID = $("#hdcomID").val();//存放装修公司ID
            var imgurl = $("#image_show").attr("src");//案例展示图
            if (imgurl.indexOf("data:image") == 0) {//如果有重新选择图片
                //先调用后台转换图片
                $.ajax({
                    type: "POST",
                    url: "/ASHX/SetImg.ashx",
                    async: false,
                    dataType: "JSON",
                    data: { 'action': 'ConvertIMG', 'imgurl': imgurl },
                    success: function (result) {
                        imgurl = result.Data;
                    }, complete: function (result) {
                    }
                });
                //先调用后台转换图片
                
            } else {
                imgurl = $("#hdHeadIMG").val();//如果没选择图片,就用隐藏域里的图
            }

            var mianJi = $("#mianJi").val();
            var yuSuan = $("#yuSuan").val();
            var huXing = $("#huXing").val();
            var fengGe = $("#fengGe").val();
            var fangShi = $("#fangShi").val();//装修方式
            var content = layedit.getContent(indexs)//详情图文HTML//layedit取值
            if (names == "") {
                errorMsg = "请输入公司名称";
            }
            if (errorMsg != "") {
                layer.msg(errorMsg, { icon: 7 });
                return false;
            }
            loadIndex = layer.load(0);
            var url = "Cases_ADD.aspx";
            $.ajax({
                type: "POST",
                url: url,
                dataType: "JSON",
                data: { 'action': 'SaveData', 'id': id, 'names': names, 'comID': comID, 'imgurl': imgurl, 'mianJi': mianJi, 'yuSuan': yuSuan, 'huXing': huXing, 'fengGe': fengGe, 'fangShi': fangShi, 'content': encodeURI(content) },
                success: function (result) {
                    if (result.State) {
                        layer.close(loadIndex);
                        layer.msg("操作成功", { time: 2000 });
                        setTimeout(closeRefresh, 2000);//关闭当前iframe,刷新指定iframe
                    }
                    else {
                        layer.msg(result.ErrorMsg, { time: 3000 });
                    }
                }, complete: function (result) {
                    layer.close(loadIndex);
                }
            });
        }

        //关闭当前iframe,刷新指定iframe
        function closeRefresh() {
            parent.layui.index.openTabsPage("Cases_List.aspx", "列表");//先打开要跳转的iframe
            parent.layui.admin.events.refresh();//刷新跳转后的iframe,调用母页面的刷新事件
            parent.removeIframe("Cases_ADD.aspx");//调用母页面的方法,传当前页的标识

        }

    </script>
    <script>
        layui.config({
            base: 'layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use('index');
    </script>
</body>
</html>

posted @ 2022-03-23 08:44  离。  阅读(241)  评论(0)    收藏  举报