blog_tp6/view/sys/article/savemd.html

<style>
    #toolbar {
        height: 40px;
        background-color: #b6b6b6;
        width: 100%;
        color: #fff;
        line-height: 50px;
    }

    #toolbar img {
        width: 25px;
        height: 25px;
        padding-top: 8px;
        padding-bottom: 7px;
        margin-left: 10px;
    }

    #toolbar img:hover {
        background: #EBEBEB;
        cursor: pointer;
    }

    #dialog {
        position: fixed;
        height: 400px;
        width: 800px;
        background: #FFFFFF;
        z-index: 5;
        left: 30%;
        border: 1px solid gray;
        top: 25%;
        display: none;
    }

    #showImg {
        height: 160px;
        width: 160px;
        position: absolute;
        border: 0.5px solid gainsboro;
        bottom: 80px;
        left: 35%;
    }

    #cancel {
        border: 0px none #FFECEC;
        background: #999999;
        color: #FFFFFF;
        padding: 5px 15px;
        position: absolute;
        top: 8px;
        right: 100px;
    }

    #cancel:hover {
        background: #AAAAAA;
    }

    #insert {
        border: 0px none #FFECEC;
        background: #BE1A21;
        color: #FFFFFF;
        padding: 5px 15px;
        position: absolute;
        top: 8px;
        right: 30px;
    }

    #insert:hover {
        background: #CB474D;
    }

    #online {
        width: 100%;
        height: 224px;
        padding: 10px 0 0 0;
    }

    #online #imageList {
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        position: relative;
        margin-left: 20px;
    }

    #online ul {
        display: block;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #online li {
        float: left;
        display: block;
        list-style: none;
        padding: 0;
        width: 113px;
        height: 113px;
        margin: 0 0 9px 9px;
        background-color: #eee;
        overflow: hidden;
        cursor: pointer;
        position: relative;
    }

    #online li img {
        cursor: pointer;
    }

    #online li .icon {
        cursor: pointer;
        width: 113px;
        height: 113px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        border: 0;
        background-repeat: no-repeat;
    }

    #online li .icon:hover {
        width: 107px;
        height: 107px;
        border: 3px solid #1094fa;
    }

    #online li.selected .icon {
        background-image: url(/static/images/success.png);
        background-image: url(images/success.gif)\9;
        background-position: 75px 75px;
    }

    #online li.clearFloat {
        float: none;
        clear: both;
        display: block;
        width: 0;
        height: 0;
        margin: 0;
        padding: 0;
    }
</style>

<article class="cl pd-20">
    <form action="{:url('save')}" method="post" class="form form-horizontal" id="form-save">
        <input type="hidden" name="id" value="{$data['id']}">
        <input type="hidden" name="content_type" value="{$data['content_type']}">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">
                <span class="c-red">*</span>栏目:</label>
            <div class="formControls col-xs-8 col-sm-6">
                <span class="select-box inline">
                    <select name="cid" class="select" id="cid">
                        <option value="">所有栏目</option>
                        {foreach $category_tree as $value}
                        <option value="{$value.id}" {eq name='data.cid' value="$value.id" }selected{/eq}>{$value.name}
                        </option>
                        {notempty name="value.child"}
                        {foreach $value.child as $val}
                        <option value="{$val.id}" {eq name='data.cid' value="$val.id" }selected{/eq}>--{$val.name}
                        </option>
                        {notempty name="val.child"}
                        {foreach $val.child as $vo}
                        <option value="{$vo.id}" {eq name='data.cid' value="$vo.id" }selected{/eq}>&nbsp;&nbsp;└
                            --{$vo.name}
                        </option>
                        {/foreach}
                        {/notempty}
                        {/foreach}
                        {/notempty}
                        {/foreach}
                    </select>
                </span>
            </div>
            <div class="col-3"> </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">
                <span class="c-red">*</span>标题:</label>
            <div class="formControls col-xs-8 col-sm-6">
                <input type="text" class="input-text" value="{$data.title}" placeholder="请填写标题" id="title" name="title">
            </div>
            <div class="col-3"> </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">
                作者: </label>
            <div class="formControls col-xs-4 col-sm-2">
                <input type="text" class="input-text" value="{$data.writer}" placeholder="作者" id="writer" name="writer">
            </div>
            <label class="form-label col-xs-4 col-sm-2">
                来源:</label>
            <div class="formControls col-xs-4 col-sm-2">
                <input type="text" class="input-text" value="{$data.source}" placeholder="来源" id="source" name="source">
            </div>
            <div class="col-3"> </div>
        </div>
        <div class="row cl">
            <div class="col-3"> </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">
                标题图：</label>
            <div class="formControls col-xs-6 col-sm-4">
                <input type="text" class="input-text" value="{$data.titlepic}" name="titlepic" id="titlepic">
                <div style="width: 200px;height: 200px;">
                    <a href="javascript:void(0);" onclick="addTitlePic()">
                        <img id="view-titlepic"
                            src="{$data.titlepic ? $data.titlepic : '/static/images/upload_picture.png'}" alt="标题图"
                            title="{$data.titlepic ? '更换' : '添加'}标题图" style="max-width: 200px;max-height: 200px;">
                    </a>
                </div>
            </div>
            <label class="form-label col-xs-2 col-sm-2">
                <a class="btn btn-success radius" href="javascript:addTitlePic();">{$data.titlepic ? '更换' :
                    '添加'}标题图</a></label>
            <div class="col-3"> </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">
                关键词:</label>
            <div class="formControls col-xs-8 col-sm-6">
                <input type="text" class="input-text" value="{$data.keywords}" placeholder="关键词" id="source"
                    name="keywords">
                <span class="c-red">多个关键词用英文','分割</span>
            </div>
            <div class="col-3"> </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">内容简介:</label>
            <div class="formControls col-xs-8 col-sm-6">
                <textarea name="summary" id="summary" cols="" rows="" class="textarea" placeholder="说点什么...最多输入500个字符"
                    datatype="*10-100" dragonfly="true" onKeyUp="textarealength(this,500)">{$data.summary}</textarea>
                <p class="textarea-numberbar">
                    <em class="textarea-length">0</em>/500
                </p>
            </div>
            <div class="col-3"> </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">
                文章正文：</label>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-1 col-sm-1"></label>
            <input type="hidden" name="content" value="" id="content">
            <div class="formControls col-xs-11 col-sm-10">
                <div id="toolbar">
                    <img src="/static/images/bold.png" id="bold" onclick="insertText('**这里填写要加粗的文字**')" />
                    <img src="/static/images/italic.png" id="italic" onclick="insertText('_这里填写要斜体的文字_')" />
                    <img src="/static/images/hyperlink.png" id="hyperlink" onclick="insertText('[这里写连接的描述](这里填写连接地址)')" />
                    <img src="/static/images/code.png" id="code" onclick="insertText('```\n这里插入代码\n```')" />
                    <img src="/static/images/image.png" id="image" onclick="showDialog()" />
                </div>
                <div id="mdeditor" style="width: 100%;height: 400px;">{$data.content}</div>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-2 col-sm-2">
                点击量：</label>
            <div class="formControls col-xs-4 col-sm-2">
                <input type="number" class="input-text" value="{$data.hits}" id="hits" name="hits"
                    style="width: 120px;">
            </div>
            <label class="form-label col-xs-2 col-sm-2">
                排序：</label>
            <div class="formControls col-xs-4 col-sm-2">
                <input type="number" class="input-text" value="{$data.sort}" id="sort" name="sort"
                    style="width: 120px;">
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <button type="button" class="btn btn-success radius" id="form-button-save">确&nbsp;定</button>
                <button type="button" class="btn btn-default radius" onclick="window.history.back();"
                    style="margin-left:20px;">取&nbsp;消</button>
            </div>
        </div>
    </form>
</article>

<div id="dialog">
    <div style="position: absolute;height: 40px;width: 100%;background: #FFFFFF;border-bottom: 1px solid gray;">
        <span style="position: absolute;left: 10px;top: 10px;color: gray;">插入图片</span>
        <img src="/static/images/X.png" style="height: 25px;width: 25px;position: absolute;right: 10px;top: 10px;cursor: pointer;"
            onclick="f_cancel()" />
    </div>

    <div id="tab-img" class="HuiTab" style="margin-top: 40px;">
        <div class="tabBar clearfix">
            <span>本地上传</span>
            <span>网络文件上传</span>
            <a onclick="onlinepicture(1)"><span>服务器图片选择</span></a>
        </div>
        <div class="tabCon">
            <div class="step1 active" style="margin-left:30px;">
                <form id="form-uploadimg" method="post" action="" enctype="multipart/form-data">
                    <div class="row cl" style="margin-top:20px;">
                        <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>图片要求: </label>
                        <div class="formControls col-xs-8 col-sm-8">
                            格式 jpg,png,gif,jpeg,webp; 大小不超过4M.
                        </div>
                        <div class="col-3"> </div>
                    </div>
                    <div class="row cl">
                        <label class="form-label col-xs-2 col-sm-2">
                            <span class="c-red">*</span>本地上传：</label>
                        <div class="formControls col-xs-4 col-sm-4">
                            <input type="file" class="input-text" name="upload_file" id="upload_file">
                        </div>
                        <div class="formControls col-xs-2 col-sm-2">
                            <button class="btn btn-primary radius" type="button" onCLick="uploadImg()">上传</button>
                        </div>
                        <div style="width: 200px;height: 200px;">
                            <img id="view-picture" src="/static/images/upload_picture.png" alt="图片"
                                title="图片" style="max-width: 200px;max-height: 200px;">
                        </div>
                        <div class="col-3"> </div>
                    </div>
                </form>
            </div>
            <!-- 本地上传end -->
        </div>
        <div class="tabCon">
            <div class="step2" style="margin-left:30px;">
                <form id="form-uploadurlimg" method="post" action="" enctype="multipart/form-data">
                    <div class="row cl" style="margin-top:20px;">
                        <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>图片要求: </label>
                        <div class="formControls col-xs-8 col-sm-8">
                            格式 jpg,png,gif,jpeg,webp; 大小不超过4M.
                        </div>
                        <div class="col-3"> </div>
                    </div>
                    <div class="row cl" style="margin-top:20px;">
                        <label class="form-label col-xs-2 col-sm-2">
                            <span class="c-red">*</span>图片地址：</label>
                        <div class="formControls col-xs-8 col-sm-8">
                            <input type="text" class="input-text" name="url_file" id="url_file">
                        </div>
                        <div class="formControls col-xs-2 col-sm-2">
                            <button class="btn btn-primary radius" type="button" onCLick="uploadUrlImg()">确定</button>
                        </div>
                        <div style="width: 200px;height: 200px;">
                            <img id="view-picture-url" src="/static/images/upload_picture.png" alt="图片"
                                title="图片" style="max-width: 200px;max-height: 200px;">
                        </div>
                        <div class="col-3"> </div>
                    </div>
                </form>
            </div>
            <!-- 网络图片 -->
        </div>
        <!-- 在线图片 -->
        <div class="tabCon">
            <form id="form-uploadonlineimg" method="post" action="" enctype="multipart/form-data">
                <div class="row cl" style="margin-top:20px;" id="online">
                    <div id="imageList">
                        <ul class="list">
                            <!-- <li>
                                    <img width="170" height="113" src="/storage/20220223/d5cc488e71c58bb072debe45ed06c6ad.jpg?noCache=1634567323"
                                     _src="/storage/20220223/d5cc488e71c58bb072debe45ed06c6ad.jpg">
                                    <span class="icon"></span>
                                </li>
                                 -->
                            <li class="clearFloat"></li>
                        </ul>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-2 col-sm-2">
                        <span class="c-red">*</span>图片地址：</label>
                    <div class="formControls col-xs-8 col-sm-8">
                        <input type="text" class="input-text" name="online_file" id="online_file">
                    </div>
                    <div class="col-3"> </div>
                </div>
            </form>
        </div>
    </div>
    <div style="position: absolute;bottom: 1px;width: 100%;height: 40px;border-top: 1px solid gray;">
        <button id="cancel" onclick="f_cancel()">取消</button>
        <button id="insert" onclick="insert()">插入</button>
    </div>
</div>

<!--请在下方写此页面业务相关的脚本-->
<script src="/static/plugins/ace/ace.js"></script>
<script src="/static/plugins/ace/mode-markdown.js"></script>
<script src="/static/plugins/ace/theme-chrome.js"></script>
<script type="text/javascript" src="/static/plugins/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="/static/plugins/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="/static/plugins/jquery.validation/1.14.0/validate-methods.js"></script>

<script type="text/javascript">
    jQuery.Huitab = function (tabBar, tabCon, class_name, tabEvent, i) {
        var $tab_menu = $(tabBar);
        // 初始化操作
        $tab_menu.removeClass(class_name);
        $(tabBar).eq(i).addClass(class_name);
        $(tabCon).hide();
        $(tabCon).eq(i).show();

        $tab_menu.bind(tabEvent, function () {
            $tab_menu.removeClass(class_name);
            $(this).addClass(class_name);
            var index = $tab_menu.index(this);
            $(tabCon).hide();
            $(tabCon).eq(index).show()
        })
    }

    var editor = ace.edit('mdeditor');//编辑框

    editor.setTheme('ace/theme/chrome');
    editor.getSession().setMode('ace/mode/markdown');
    editor.renderer.setShowPrintMargin(false);

    //添加标题图
    function addTitlePic() {
        layer.open({
            type: 2,
            area: ['700px', '500px'],
            fix: false, //不固定
            maxmin: true,
            shade: 0.4,
            title: '添加标题图',
            content: '{:url("file_manager/uploadimg", ["_layer"=>true,"img_id"=>"titlepic"])}'
        });
    }

    //插入图片弹窗取消
    function f_cancel() {
        $('#dialog').hide();
    }
    //显示弹窗
    function showDialog() {
        $('#dialog').show();
    }

    //左侧插入，用户插入一些特定方法
    function insertText(val) {
        editor.insert(val); //光标位置插入
    }

    // 文档图片插入地址
    var imgUrl = "";

    //插入图片
    function insert() {
        $('#dialog').hide();
        insertText('![这里写图片描述](' + imgUrl + ')')
    }

    //上传图片到服务器，返回图片地址
    function uploadFile() {
        imgUrl = 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white.png';
        $('#showImg').attr('src', 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white.png');
    }

    //本地上传图片
    function uploadImg() {
        if ($("#upload_file").val() == '') {
            layer.msg("请选择要上传的文件", {
                icon: 6,
                time: 1000
            });
            return false;
        } else {
            var formData = new FormData($("#form-uploadimg")[0]);
            $.ajax({
                url: '{:url("file_manager/uploadimg")}',
                type: 'POST',
                async: true,
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function (res) {
                    if (res.code == 0) {
                        console.log(res);
                        imgUrl = res.picture_url + res.picname;
                        $("#view-picture").attr('src', imgUrl);
                    } else {
                        layer.msg(res.msg, {
                            icon: 5,
                            time: 1000
                        });
                        return false;
                    }
                }
            });
        }
    }

    // 网络图片
    function uploadUrlImg() {
        if ($("#url_file").val() == '') {
            layer.msg("请选择要上传的地址", {
                icon: 6,
                time: 1000
            });
            return false;
        } else {
            var formData = new FormData($("#form-uploadurlimg")[0]);
            $.ajax({
                url: '{:url("file_manager/uploadurlimg")}',
                type: 'POST',
                async: true,
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function (res) {
                    if (res.code == 0) {
                        console.log(res);
                        imgUrl = res.picture_url + res.picname;
                        $("#view-picture-url").attr('src', imgUrl);
                    } else {
                        layer.msg(res.msg, {
                            icon: 5,
                            time: 1000
                        });
                        return false;
                    }
                }
            });
        }
    }

    // 获取服务器图片
    function onlinepicture(page) {
        var data = { "page": page };
        $.ajax({
            url: '{:url("file_manager/onlineimg")}',
            type: 'GET',
            async: true,
            cache: false,
            data: 'page=' + page,
            processData: false,
            contentType: false,
            dataType: "json",
            success: function (res) {
                if (res.code == 0) {
                    html_str = "";
                    res.list.forEach(element => {
                        html_str += '<li><img width="170" height="113" src="' + element.url + '?noCache=' + element.mtime + '"';
                        html_str += '_src="' + element.url + '">';
                        html_str += '<span class="icon"></span></li>';
                    });
                    $('ul.list').prepend(html_str);
                }
            }
        });
    }

    $(function () {
        $.Huitab("#tab-img .tabBar span", "#tab-img .tabCon", "current", "click", "0");
        $(document).on("click", "#online li", function () {
            $("#online li").removeClass('selected');

            $(this).addClass('selected');

            imgUrl = $(this).children('img').attr('_src');

            $("#online_file").val(imgUrl);
        })
    });


    function validator(params) {
        return $("#form-save").validate({
            debug: true,
            rules: {
                title: {
                    required: true,
                }
                , summary: {
                    maxlength: 500,
                }
                , sort: {
                    max: 99
                }
                , cid: {
                    required: true
                }
            },
            messages: {
                title: {
                    required: "标题不能为空"
                }
                , cid: {
                    required: "栏目不能为空"
                }
            }
        });
    }

    $("#form-button-save").click(function () {
        if (!validator().form()) {
            return false
        }

        $("#content").val(editor.getValue());

        $("#form-save")[0].submit();
    })
</script>