添加markdown 编辑器

app/common/model/Article.php

@@ -83,7 +83,7 @@ class Article extends Base
         $limit = empty($params['limit']) ? 20 : (int)$params['limit'];
 
         $list = self::where($where)
-            ->field('id,cid,title,titlepic,username,summary,hits,sorts,status,create_time')
+            ->field('id,cid,title,titlepic,username,summary,content_type,hits,sorts,status,create_time')
             ->with(['category'])
             ->order('id desc')->paginate($limit, false, ['query' => $params]);
 

app/common/model/SysLog.php

@@ -41,7 +41,7 @@ class SysLog extends Model
         
         $active =  \app\common\model\SysMenu::where('url', $route)->find();
 
-        $title =  $active['name'];
+        $title =  $active != null ? $active['name'] : "";
 
         // 内容处理(过长的内容和涉及密码的内容不进行记录)
         if ($content) {

app/index/controller/Article.php

@@ -67,6 +67,16 @@ class Article extends Base
         View::assign('data', $data);
         View::assign('prev_next', $prev_next);
 
+        if ($data->content_type==1) {
+            $parsedownExtension = new \ParsedownExtension();
+            $parsedownExtension->setTocEnabled(true);
+            $res = $parsedownExtension->text($data->content);
+
+            $data->content = $res['content'];
+            $data->toc = $res['toc'];
+        }
+
+
         return View::fetch();
     }
 

app/sys/controller/Article.php

@@ -1,5 +1,6 @@
 <?php
-declare (strict_types = 1);
+
+declare(strict_types=1);
 /**
  * +----------------------------------------------------------------------
  * 后台文章控制制器
@@ -7,6 +8,7 @@ declare (strict_types = 1);
  * @version   0.0.1
  * +----------------------------------------------------------------------
  */
+
 namespace app\sys\controller;
 
 // 引入框架内置类
@@ -28,7 +30,7 @@ class Article extends Base
         $categories = CategoryModel::select();
 
         $category_tree = list_tree($categories);
-        
+
         $cid = $this->app->request->param('cid');
 
         $params = $this->app->request->param();
@@ -42,7 +44,7 @@ class Article extends Base
         return View::fetch();
     }
 
-    public function save($id = 0, $cid = 0)
+    public function save($content_type = 0, $id = 0)
     {
         if ($this->app->request->isPost()) {
             $params = $this->app->request->param();
@@ -53,10 +55,11 @@ class Article extends Base
             if ($params['title'] == '') {
                 $this->error("标题不能为空");
             }
+
             $params['content'] =  isset($params['content']) ? $params['content'] : '';
             try {
                 if ($params['id'] != 0) {
-                   ArticleModel::update($params);
+                    ArticleModel::update($params);
                 } else {
                     $params['userid'] = $this->getSysUser()->userid;
                     $params['username'] = $this->getSysUser()->username;
@@ -66,27 +69,24 @@ class Article extends Base
             } catch (\Exception $e) {
                 $msg = $e->getMessage();
 
-                $this->error("错误提示:".$msg);
+                $this->error("错误提示:" . $msg);
             }
-            $this->success('操作成功', (string) url('index?cid='.$params['cid']));
+            $this->success('操作成功', (string) url('index?cid=' . $params['cid']));
         } else {
-            if (!$cid) {
-                $this->error('请选择栏目');
-            }
-
             if ($id) {
                 $data = ArticleModel::find($id);
             } else {
                 $data = new ArticleModel();
             }
-            
-            $category_info = CategoryModel::field('id, parent_id, name')->find($cid);
-    
-            View::assign('cid', $cid);
-            View::assign('category_info', $category_info);
+
+            $categories = CategoryModel::field('id, parent_id, name')->select();
+
+            View::assign('category_tree', list_tree($categories));
             View::assign('data', $data);
-         
-            return View::fetch();
+
+            $template = $content_type ? 'savemd' : 'save';
+
+            return View::fetch($template);
         }
     }
 }

app/sys/controller/Index.php

@@ -4,13 +4,12 @@ declare (strict_types = 1);
 namespace app\sys\controller;
 
 use think\facade\App;
-use think\Facade\Db;
-use think\Facade\Config;
-use think\Facade\View;
+use think\facade\Db;
+use think\facade\Config;
+use think\facade\View;
 
 class Index  extends Base
 {
-    
     public function index()
     {
         // 系统信息

composer.json

@@ -25,7 +25,8 @@
         "topthink/think-orm": "^2.0",
         "topthink/think-multi-app": "^1.0",
         "liliuwei/thinkphp-jump": "^1.5",
-        "topthink/think-image": "^1.0"
+        "topthink/think-image": "^1.0",
+        "erusev/parsedown": "^1.7"
     },
     "require-dev": {
         "symfony/var-dumper": "^4.2",

config/app.php

@@ -19,8 +19,8 @@ return [
     'app_map'          => [],
     // 域名绑定（自动多应用模式有效）
     'domain_bind'      => [
-        'admin' => 'sys',
-        '*'     => 'index'
+        // 'admin' => 'sys',
+        // '*'     => 'index'
     ],
     // 禁止URL访问的应用列表（自动多应用模式有效）
     'deny_app_list'    => ['common'],

view/index/article/read.html

@@ -1,4 +1,4 @@
-<link href="/static/plugins/highlight/styles/monokai-sublime.min.css" rel="stylesheet"> 
+<link href="/static/plugins/highlight/styles/solarized-light.css" rel="stylesheet"> 
 
 <div class="box">
   <div class="blank"></div>
@@ -56,12 +56,19 @@
   {include file="aside"}
 </div>
 
-<script src="/static/plugins/highlight/highlight.min.js"></script>
+<script src="/static/plugins/highlight/highlight.pack.js"></script>
 <!-- <script src="/static/plugins/md/js/marked.js"></script> -->
+<script src="/static/plugins/lib/ueditor/1.4.3/third-party/SyntaxHighlighter/shCore.js"></script>
 <script type="text/javascript">
-  // hljs.initHighlightingOnLoad();
-  hljs.highlightAll();
+  $(document).ready(function() {
+        $('pre').each(function(i, block) {
+          hljs.highlightBlock(block);
+        });
+    });
 
+  // hljs.initHighlightingOnLoad();
+  // hljs.highlightAll();
+  // SyntaxHighlighter.all();
   // marked.setOptions({
   //   renderer: new marked.Renderer(),
   //   gfm: true,

view/sys/article/index.html

@@ -3,8 +3,10 @@
         <span class="l">
             <a href="javascript:;" onclick="del_all()" class="btn btn-danger radius">
                 <i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a>
-            <a class="btn btn-primary radius" href="javascript:save(0);">
+            <a class="btn btn-primary radius" href="{:url('save')}">
                 <i class="Hui-iconfont">&#xe600;</i> 添加文章</a>
+            <a class="btn btn-primary radius" href="{:url('save', ['content_type'=>1])}">
+                <i class="Hui-iconfont">&#xe600;</i> 添加MarkDown文章</a>
         </span>
         <span class="select-box inline ml-50">
             <select name="cid" id="sel_option" class="select">
@@ -54,14 +56,15 @@
                     </td>
                     <td>{$val.id}</td>
                     <td class="text-l">
-                        <a href="/index/article/detail/id/{$val.id}" style="text-decoration:none" title="浏览"
+                        <a href="/index/{$val.create_time|date='Y/m/d'}/{$val.id}" style="text-decoration:none" title="浏览"
                             target="_blank">{$val.title}</a>
                     </td>
                     <td>{$val.category_name}</td>
                     <td>{$val.username}</td>
                     <td>{$val.update_time}</td>
                     <td>{$val.hits}</td>
-                    <td><input type="text" class="input-text input-sort" value="{$val.sorts}" data-id="{$val.id}" style="text-align: center;"></td>
+                    <td><input type="text" class="input-text input-sort" value="{$val.sorts}" data-id="{$val.id}"
+                            style="text-align: center;"></td>
                     <td class="td-status">
                         {if $val.status == 1}
                         <a href="javascript:;" onclick="status(this,'{$val.id}')" title="正常"><span
@@ -71,11 +74,12 @@
                                 class="f-20 c-primary"><i class="Hui-iconfont">&#xe677;</i></span></a>
                         {/if}
                     </td>
-                    
                     <td class="td-manage">
-                        <a href="{:url('save?cid='.$val['cid'].'&id='.$val['id'])}" title="编辑" class="btn btn-primary radius">
+                        <a href="{:url('save',['content_type'=>$val['content_type'], 'id'=>$val['id']])}" title="编辑"
+                            class="btn btn-primary radius">
                             <i class="Hui-iconfont">&#xe6df;</i></a>
-                        <a href="javascript:;" title="删除" class="ml-10 btn btn-danger radius" onClick="del(this,'{$val.id}')">
+                        <a href="javascript:;" title="删除" class="ml-10 btn btn-danger radius"
+                            onClick="del(this,'{$val.id}')">
                             <i class="Hui-iconfont">&#xe6e2;</i></a>
                     </td>
                 </tr>
@@ -98,19 +102,4 @@
         }
         return false;
     })
-
-    function save(id) {
-        var cid = $("#sel_option").val();
-        // console.log(cid);
-        // return false;
-        if (!cid || cid == 0) {
-            layer.msg("请选择栏目", {
-                icon: 5,
-                time: 2000
-            });
-            return false;
-        }
-        window.location.href = '/sys/article/save?id='+id+'&cid='+cid;
-        return false;
-    }
-</script>
+</script>

view/sys/article/save.html

@@ -1,6 +1,36 @@
 <article class="cl pd-20">
-    <form action="{:url('save?cid='.$cid.'&id='.$data['id'])}" method="post" class="form form-horizontal"
-        id="form-admin-article">
+    <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>
@@ -18,8 +48,7 @@
             <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">
+                <input type="text" class="input-text" value="{$data.source}" placeholder="来源" id="source" name="source">
             </div>
             <div class="col-3"> </div>
         </div>
@@ -34,9 +63,8 @@
                 <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;">
+                            src="{$data.titlepic ? $data.titlepic : '/static/images/upload_picture.png'}" alt="标题图"
+                            title="{$data.titlepic ? '更换' : '添加'}标题图" style="max-width: 200px;max-height: 200px;">
                     </a>
                 </div>
             </div>
@@ -73,8 +101,7 @@
         <div class="row cl">
             <label class="form-label col-xs-1 col-sm-1"></label>
             <div class="formControls col-xs-11 col-sm-10">
-                <script id="editor" type="text/plain"
-                    style="width:100%;height:400px;">{$data.content|raw}</script>
+                <script id="editor" type="text/plain" style="width:100%;height:400px;">{$data.content|raw}</script>
             </div>
         </div>
         <div class="row cl">
@@ -93,7 +120,7 @@
         </div>
         <div class="row cl">
             <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
-                <button type="submit" class="btn btn-success radius" id="admin-powers-save" name="">确&nbsp;定</button>
+                <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>
@@ -101,10 +128,14 @@
     </form>
 </article>
 
+<!--请在下方写此页面业务相关的脚本-->
 <script type="text/javascript" src="/static/plugins/lib/ueditor/1.4.3/ueditor.config.js"></script>
-<script type="text/javascript" src="/static/plugins/lib/ueditor/1.4.3/ueditor.all.min.js"></script>
+<script type="text/javascript" src="/static/plugins/lib/ueditor/1.4.3/ueditor.all.js"></script>
 <script type="text/javascript" src="/static/plugins/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.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">
     $(function () {
         //实例化编辑器   
@@ -113,23 +144,41 @@
             textarea: "content",
         });
     })
-    $("#form-admin-article").submit(function () {
-        if (isNull($("#title").val())) {
-            layer.msg('标题不可为空', {
-                icon: 5,
-                time: 1000
-            });
-            return false;
-        }
 
-        var summary = $("#summary").val();
-        if (getblen(summary) > 200) {
-            layer.msg('内容简介过长', {
-                icon: 5,
-                time: 1000
-            });
-            return false;
+    function validator(params) {
+        return $("#form-save").validate({
+            debug: true,
+            rules: {
+                title: {
+                    required: true,
+                }
+                ,summary: {
+                    maxlength: 500,
+                }
+                ,sorts: {
+                    max: 99
+                }
+                ,cid : {
+                    required: true
+                }
+            },
+            messages: {
+                title: {
+                    required: "标题不能为空"
+                }
+                ,cid: {
+                    required: "栏目不能为空"
+                }
+            }
+        });
+    }
+
+    $("#form-button-save").click(function(){
+        if (!validator().form()) {
+            return false
         }
+
+        $("#form-save")[0].submit();
     })
 
     //添加标题图

view/sys/article/savemd.html

@@ -0,0 +1,612 @@
+<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/img/bold.png" id="bold" onclick="insertText('**这里填写要加粗的文字**')" />
+                    <img src="/static/img/italic.png" id="italic" onclick="insertText('_这里填写要斜体的文字_')" />
+                    <img src="/static/img/hyperlink.png" id="hyperlink" onclick="insertText('[这里写连接的描述](这里填写连接地址)')" />
+                    <img src="/static/img/code.png" id="code" onclick="insertText('```\n这里插入代码\n```')" />
+                    <img src="/static/img/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.sorts}" id="sorts" name="sorts"
+                    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="img/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/plugins/h-ui.admin/images/admin-login-bg.jpg" 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-4 col-sm-4">
+                            <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/plugins/h-ui.admin/images/admin-login-bg.jpg" 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-6">
+                        <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,
+                }
+                , sorts: {
+                    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>