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: 300px;
        width: 600px;
        background: #FFFFFF;
        z-index: 5;
        left: 30%;
        border: 1px solid gray;
        top: 25%;
        display: none;
    }

    #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;
    }
</style>

<article class="cl pd-20">
    <form action="{:url('/sys/article/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="uploadPicture('titlepic')">
                        <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:void(0);"  onclick="uploadPicture('titlepic')">{$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" name="content" 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="row cl" style="margin-top:40px;">
            <div
                style="width: 160px;height: 160px;margin: 0 auto;display: table-cell;vertical-align: middle;text-align: center;">
                <img id="view-picture" src="/static/images/upload_picture.png" alt="图片" title="图片"
                    style="max-width: 120px;max-height: 120px;" onclick="uploadPicture('picture')">
            </div>
            <input type="text" class="input-text" name="picture" id="picture" value="" style="width: 90%;margin-left: 5%;">
        </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>

<!-- 图片上传 -->
<div>
    <form id="form-upload_picture">
        <input type="file" hidden name="image" id="upload_picture">
    </form>
</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">
    var editor = ace.edit('mdeditor');//编辑框

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

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

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

    //插入图片
    function insert() {
        $('#dialog').hide();

        // 文档图片插入地址
        var imgUrl = $("#picture").val();

        insertText('![这里写图片描述](' + imgUrl + ')')

        $("#picture").val('');
        $("#view-picture").attr('src', '/static/images/upload_picture.png');
    }

    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();
    })

    //添加图片
    const file = document.getElementById('upload_picture');

    function uploadPicture(name) {
        // file模拟input点击事件
        var evt = new MouseEvent("click", {
            bubbles: false,
            cancelable: true,
            view: window,
        });
        file.dispatchEvent(evt, uploadfn(name));
    }

    function uploadfn(name) {
        file.oninput = function () {
            if (file.files && file.files[0]) {
                var formData = new FormData();
                formData.append("upload_file", file.files[0]);
                $.ajax({
                    url: '{:url("/sys/file_manager/uploadImage")}',
                    type: "post",
                    data: formData,
                    processData: false, // 告诉jQuery不要去处理发送的数据
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                    dataType: 'json',
                    success: function (res) {
                        // console.log(res);
                        var img = res.data.filename;
                        $("#view-"+name).attr('src', img);
                        $("#"+name).val(img);
                        layer.msg(res.msg, {
                            icon: 1,
                            time: 1000
                        });
                    },
                    error: function (res) {
                        layer.msg(res.msg, {
                            icon: 5,
                            time: 1000
                        });
                        return false;
                    },
                    complete: function () {
                        document.getElementById('form-upload_picture').reset();
                    }
                });
            }
        }
    }
</script>