基本完成新的编辑器;

app/admin/controller/Post.php

@@ -24,8 +24,8 @@ class Post extends Common
     {
         //
 
-    $list = ModelPost::with(['categorys.category','tags.tag'])
+        $list = ModelPost::with(['categorys.category', 'tags.tag'])
-    ->where('type',$this->request->param('type',1))
+            ->where('type', $this->request->param('type', 1))
             ->order('id desc')
             ->paginate();
 
@@ -85,7 +85,7 @@ class Post extends Common
             ]);
         }
 
-    return $this->success('添加成功',url('index',['type'=>$this->request->param('type')]));
+        return $this->success('添加成功', url('index', ['type' => $this->request->param('type')]));
     }
 
     /**
@@ -117,6 +117,15 @@ class Post extends Common
         return View::fetch();
     }
 
+    public function editContent($id)
+    {
+        $model_post = ModelPost::find($id);
+
+
+        View::assign('post', $model_post);
+        return View::fetch();
+    }
+
     /**
      * 保存更新的资源
      *
@@ -183,7 +192,7 @@ class Post extends Common
             }
         }
 
-    return $this->success('保存成功', url('index',['type'=>$model_post->getData('type')]));
+        return $this->success('保存成功', url('index', ['type' => $model_post->getData('type')]));
     }
 
     /**
@@ -200,9 +209,9 @@ class Post extends Common
 
         $model_post->delete();
 
-    PostCategory::where('post_id',$id)->delete();
+        PostCategory::where('post_id', $id)->delete();
 
-    PostTag::where('post_id',$id)->delete();
+        PostTag::where('post_id', $id)->delete();
 
         return json_message();
     }

public/static/css/skin-1.css

@@ -1,28 +1,27 @@
-@media screen and (max-width: 768px){
+@media screen and (max-width: 768px) {}
 
-}
+.layui-nav-tree .layui-nav-item a:hover {
-.layui-nav-tree .layui-nav-item a:hover{
     background-color: #6699CC;
 }
 
-.layui-bg-black{
+.layui-bg-black {
     background-color: #66CCFF !important;
 }
 
 .layui-nav-tree .layui-nav-child dd.layui-this,
 .layui-nav-tree .layui-nav-child dd.layui-this a,
 .layui-nav-tree .layui-this,
-.layui-nav-tree .layui-this > a, 
+.layui-nav-tree .layui-this>a,
-.layui-nav-tree .layui-this > a:hover{
+.layui-nav-tree .layui-this>a:hover {
     background-color: #6699CC;
 }
 
-.layui-layout-admin .layui-logo{
+.layui-layout-admin .layui-logo {
-    color: #fff;
+    color      : #fff;
     line-height: 45px;
 }
 
-.layui-layout-admin .layui-header{
+.layui-layout-admin .layui-header {
     background-color: #39BDFF;
 }
 
@@ -30,11 +29,11 @@
     background-color: #66CCFF;
 }
 
-.layui-header{
+.layui-header {
     height: 45px;
 }
 
-.layui-nav .layui-nav-item{
+.layui-nav .layui-nav-item {
     line-height: 45px;
 }
 
@@ -53,94 +52,103 @@
     background-color: #CCFFFF;
 }
 
-.layui-tab-brief > .layui-tab-title .layui-this{
+.layui-tab-brief>.layui-tab-title .layui-this {
     color: #66CCFF;
 }
 
-.layui-tab-brief > .layui-tab-more li.layui-this::after, .layui-tab-brief > .layui-tab-title .layui-this::after{
+.layui-tab-brief>.layui-tab-more li.layui-this::after,
+.layui-tab-brief>.layui-tab-title .layui-this::after {
     border-color: #66CCFF;
 }
 
-.layui-btn{
+.layui-btn {
     background-color: #66CCFF;
 }
-.layui-form-radio > i:hover, .layui-form-radioed > i{
+
+.layui-form-radio>i:hover,
+.layui-form-radioed>i {
     color: #66CCFF;
 }
 
-.layui-elem-quote{
+.layui-elem-quote {
     border-color: #66CCFF;
 }
 
-.layui-laydate td.layui-this{
+.layui-laydate td.layui-this {
     background-color: #66CCFF !important;
 }
 
-.layui-form-checkbox[lay-skin="primary"]:hover i{
+.layui-form-checkbox[lay-skin="primary"]:hover i {
     border-color: #66CCFF;
 }
-.layui-form-checked[lay-skin="primary"] i{
+
-    border-color: #66CCFF !important;
+.layui-form-checked[lay-skin="primary"] i {
+    border-color    : #66CCFF !important;
     background-color: #66CCFF !important;
 }
 
-.layui-form-select dl dd.layui-this{
+.layui-form-select dl dd.layui-this {
     background-color: #66CCFF;
 }
 
 
-.layui-form-label{
+.layui-form-label {
-  width: unset;
+    width      : unset;
-  padding: 3px 3px;
+    padding    : 3px 3px;
-  float: unset;
+    float      : unset;
-  text-align: left;
+    text-align : left;
     font-weight: 600;
-  font-size: 15px;
+    font-size  : 15px;
 }
 
-.layui-input-block{
+.layui-input-block {
     margin-left: 0;
 }
 
-.layui-form-pane .layui-form-label{
+.layui-form-pane .layui-form-label {
-  float: left;
+    float      : left;
     font-weight: normal;
-  font-size: 14px;
+    font-size  : 14px;
 }
 
-.layui-nav-tree .layui-nav-item a{
+.layui-nav-tree .layui-nav-item a {
-    height: 35px;
+    height     : 35px;
     line-height: 35px;
 }
 
-.layui-nav-tree{
+.layui-nav-tree {
     width: 140px;
 }
-.layui-layout-admin .layui-side{
+
+.layui-layout-admin .layui-side {
     width: 140px;
-    top: 45px;
+    top  : 45px;
 }
-.layui-layout-admin .layui-footer{
+
-    left: 140px;
+.layui-layout-admin .layui-footer {
-    height: 35px;
+    left       : 140px;
+    height     : 35px;
     line-height: 35px;
 }
-.layui-layout-admin .layui-body{
+
-    top: 45px;
+.layui-layout-admin .layui-body {
+    top   : 45px;
+    bottom: 35px;
 }
 
-.layui-side-scroll{
+.layui-side-scroll {
     width: 140px;
 }
 
-.layui-body{
+.layui-body {
     left: 140px;
 }
 
-.layui-nav .layui-nav-child dd.layui-this a, .layui-nav-child dd.layui-this{
+.layui-nav .layui-nav-child dd.layui-this a,
+.layui-nav-child dd.layui-this {
     background-color: #19B3FF;
 }
 
-.layui-nav-tree .layui-nav-bar{
+.layui-nav-tree .layui-nav-bar {
     background-color: #66CCFF;
 }

view/admin/post/create.html

@@ -7,8 +7,6 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>内容管理</title>
     {include file="common/_require"}
-    <link rel="stylesheet" href="/static/lib/quill/quill.snow.css">
-    <script src="/static/lib/quill/quill.min.js"></script>
     <script>
         var currentHeaderNavItem = 'Post-{$Request.param.type|default="1"}';
         var currentLeftNavItem = 'post-{$Request.param.type|default="1"}';
@@ -72,8 +70,21 @@
                                                 <textarea name="desc" class="layui-textarea"></textarea>
                                             </div>
                                         </div>
-
                                         <div class="layui-form-item">
+                                            <div class="layui-form-label">状态</div>
+                                            <div class="layui-input-block">
+                                                <input type="radio" name="status" value="1" title="发布">
+                                                <input type="radio" name="status" value="0" title="不发布" checked>
+                                            </div>
+                                        </div>
+                                        <div class="layui-form-item">
+                                            <div class="layui-form-label">发表时间</div>
+                                            <div class="layui-input-block">
+                                                <input type="text" name="publish_time" class="layui-input publish-time">
+                                            </div>
+                                        </div>
+
+                                        <div class="layui-form-item" style="display: none;">
                                             <div class="layui-form-label">内容</div>
                                             <div class="layui-input-block">
                                                 <div id="toolbar">
@@ -128,23 +139,11 @@
                                     </div>
                                 </fieldset>
                             </div>
-                            <div class="layui-col-md3 layui-col-lg2">
+                            <div class="layui-col-md3 layui-col-lg2" style="display: none;">
                                 <fieldset class="layui-elem-field sm-form">
                                     <legend>信息</legend>
                                     <div class="layui-field-box">
-                                        <div class="layui-form-item">
+                                       
-                                            <div class="layui-form-label">状态</div>
-                                            <div class="layui-input-block">
-                                                <input type="radio" name="status" value="1" title="发布">
-                                                <input type="radio" name="status" value="0" title="不发布" checked>
-                                            </div>
-                                        </div>
-                                        <div class="layui-form-item">
-                                            <div class="layui-form-label">发表时间</div>
-                                            <div class="layui-input-block">
-                                                <input type="text" name="publish_time" class="layui-input publish-time">
-                                            </div>
-                                        </div>
                                         <div class="layui-form-item">
                                             <div class="layui-form-label">分类</div>
                                             <div class="layui-input-block ">
@@ -273,57 +272,8 @@
                 index: 0,
                 lenght: 0
             }
-            var quill = new Quill('#editor', {
-                theme: 'snow',
-                modules: {
-                    toolbar: '#toolbar',
             
-                },
 
-            });
-
-            quill.on('selection-change', function (range, oldRange, source) {
-                if (range) {
-                    if (range.length == 0) {
-                        console.log('User cursor is on', range.index);
-                    } else {
-                        var text = quill.getText(range.index, range.length);
-                        console.log('User has highlighted', text);
-                    }
-                    currentRange = range;
-                    console.log(currentRange);
-
-                } else {
-                    console.log('Cursor not in the editor');
-                }
-            });
-
-            quill.on('text-change', function (delta, oldDelta, source) {
-                currentRange.index = delta.ops[0].retain
-                if (source == 'api') {
-                    console.log("An API call triggered this change.");
-                } else if (source == 'user') {
-                    console.log("A user action triggered this change.");
-                }
-            });
-
-            upload.render({
-                elem: '.ql-image',
-                url: '{:url("File/save")}',
-                data: {
-                    type: 4,
-                    dir: 'article'
-                },
-                accept: 'images',
-                done: function (result) {
-                    if (result.code == 0) {
-                        layer.msg('上传成功');
-                        quill.insertEmbed(++currentRange.index, 'image', result.data.src);
-                    } else {
-                        layer.msg(result.msg)
-                    }
-                }
-            })
             upload.render({
                 elem: '.upload-poster',
                 url: '{:url("File/save")}',
@@ -342,17 +292,12 @@
                     }
                 }
             })
-            var toolbar = quill.getModule('toolbar');
-            toolbar.addHandler('image', function () {
-                return false;
-            });
            
             form.on('submit(save)', function (data) {
 
                 var formData = data.field;
 
-                formData.content = quill.getContents().ops
+    
-                formData.content_html = $('#editor .ql-editor').html()
 
                 console.log(formData);
                 window.loading = layer.load()

view/admin/post/edit.html

@@ -7,8 +7,6 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>内容管理</title>
     {include file="common/_require"}
-    <link rel="stylesheet" href="/static/lib/quill/quill.snow.css">
-    <script src="/static/lib/quill/quill.min.js"></script>
 
     <script>
         var currentHeaderNavItem = 'Post-{$Request.param.type|default="1"}';
@@ -42,7 +40,7 @@
                     <div class="layui-row">
                         <form action="{:url('update')}" method="POST" class="layui-form" lay-filter="*">
                             <input type="hidden" name="id" value="{$post.id}">
-                            <div class="layui-col-md9 layui-col-lg10">
+                            <div class="layui-col-md6 layui-col-lg8">
                                 <fieldset class="layui-elem-field">
                                     <legend>编辑</legend>
                                     <div class="layui-field-box">
@@ -67,61 +65,30 @@
                                                 </div>
                                             </div>
                                         </div>
+                                        
                                         <div class="layui-form-item">
                                             <div class="layui-form-label">描述</div>
                                             <div class="layui-input-block">
                                                 <textarea name="desc" class="layui-textarea">{$post->getData('desc')}</textarea>
                                             </div>
                                         </div>
-
                                         <div class="layui-form-item">
-                                            <div class="layui-form-label">内容</div>
+                                            <div class="layui-form-label">
+                                                作者名称
+                                                <p class="layui-word-aux">不填使用系统设置的名称</p>
+                                            </div>
                                             <div class="layui-input-block">
-                                                <div id="toolbar">
+                                                <input type="text" name="author_name" value="{$post->getData('author_name')}" class="layui-input">
-                                                    <!-- Add font size dropdown -->
-                                                    <select class="ql-size" lay-ignore="lay-ignore">
-                                                        <option value="small">小号</option>
-                                                        <!-- Note a missing, thus falsy value, is used to reset to default -->
-                                                        <option selected>正常</option>
-                                                        <option value="large">大号</option>
-                                                        <option value="huge">特大号</option>
-                                                    </select>
-                                                    <!-- Add a bold button -->
-                                                    <button class="ql-bold"></button>
-                                                    <button class="ql-italic"></button>
-                                                    <button class="ql-link"></button>
-                                                    <button class="ql-underline"></button>
-                                                    <button class="ql-strike"></button>
-                                                    <button class="ql-blockquote"></button>
-                                                    <button class="ql-code-block"></button>
-                                                    <button class="ql-header" value="1" title="大标题"></button>
-                                                    <button class="ql-header" value="2" title="小标题"></button>
-                                                    <button class="ql-list" value="ordered" title="有序列表"></button>
-                                                    <button class="ql-list" value="bullet" title="无序列表"></button>
-
-                                                    <!-- Add subscript and superscript buttons -->
-                                                    <button class="ql-script" value="sub"></button>
-                                                    <button class="ql-script" value="super"></button>
-                                                    <button class="ql-indent" value="-1"></button>
-                                                    <button class="ql-indent" value="+1"></button>
-                                                    <button class="ql-direction" value="rtl"></button>
-                                                    <select class="ql-color" lay-ignore="lay-ignore"></select>
-                                                    <select class="ql-background" lay-ignore="lay-ignore"></select>
-                                                    <select class="ql-font" lay-ignore="lay-ignore"></select>
-                                                    <button class="ql-align" value="center"></button>
-                                                    <button class="ql-align" value=""></button>
-                                                    <button class="ql-align" value="right"></button>
-                                                    <button class="ql-align" value="justify"></button>
-                                                    <button class="ql-image" title="选择图片"></button>
-
-
-                                                </div>
-                                                <div id="editor" style="height: 600px;">
-
-                                                </div>
-                                                <div id="content" style="display: none;">{:base64_encode(json_encode($post->content))}</div>
                                             </div>
                                         </div>
+                                        <div class="layui-form-item">
+                                            <div class="layui-form-label">是否置顶</div>
+                                            <div class="layui-input-block">
+                                                <input type="radio" name="is_top" value="1" title="置顶">
+                                                <input type="radio" name="is_top" value="0" title="不置顶">
+                                            </div>
+                                        </div>
+                                        
 
                                         <div class="layui-form-item">
                                             <button class="layui-btn layui-btn-fluid" type="submit" lay-submit lay-filter="save">保存</button>
@@ -134,6 +101,8 @@
                                 <fieldset class="layui-elem-field sm-form">
                                     <legend>信息</legend>
                                     <div class="layui-field-box">
+                                        
+                                       
                                         <div class="layui-form-item">
                                             <div class="layui-form-label">状态</div>
                                             <div class="layui-input-block">
@@ -147,6 +116,53 @@
                                                 <input type="text" name="publish_time" value="{$post->publish_time_datetime}" class="layui-input publish-time">
                                             </div>
                                         </div>
+                                        <div class="layui-form-item">
+                                            <div class="layui-form-label">跳转链接</div>
+                                            <div class="layui-input-block">
+                                                <input type="text" name="jump_to_url" value="{$post->getData('jump_to_url')}" class="layui-input">
+                                            </div>
+                                        </div>
+                                        <div class="layui-form-item">
+                                            <div class="layui-form-label">跳转按钮名称</div>
+                                            <div class="layui-input-block">
+                                                <input type="text" name="jump_to_btn_title" value="{$post->getData('jump_to_btn_title')}" class="layui-input">
+                                            </div>
+                                        </div>
+
+                                        <div class="layui-form-item">
+                                            <div class="layui-form-label">跳转链接状态</div>
+                                            <div class="layui-input-block">
+                                                <input type="radio" name="jump_to_url_status" value="0" title="不显示">
+                                                <input type="radio" name="jump_to_url_status" value="1" title="仅显示">
+                                                <input type="radio" name="jump_to_url_status" value="2" title="自动跳转">
+                                            </div>
+                                        </div>
+                                       
+                                        <div class="layui-form-item">
+                                            <div class="layui-form-label">排序</div>
+                                            <div class="layui-input-block">
+                                                <input type="number" name="sort" value="{$post->getData('sort')}" class="layui-input">
+                                                <div class="layui-form-mid layui-word-aux">越大越靠前</div>
+                                            </div>
+                                        </div>
+                                        <div class="layui-form-item">
+                                            <div class="layui-form-label">模板</div>
+                                            <div class="layui-input-block">
+                                                <select name="tpl_name">
+                                                    {volist name=':config("view_type.post")' id='tpl_name'}
+                                                    <option value="{$key}">{$tpl_name}</option>
+                                                    {/volist}
+                                                </select>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </fieldset>
+                            </div>
+                            <div class="layui-col-md3 layui-col-lg2">
+                                <fieldset class="layui-elem-field sm-form">
+                                    <legend>分类和标签</legend>
+                                    <div class="layui-field-box">
+                                        
                                         <div class="layui-form-item">
                                             <div class="layui-form-label">分类</div>
                                             <div class="layui-input-block ">
@@ -183,60 +199,8 @@
 
                                             </div>
                                         </div>
-                                        <div class="layui-form-item">
-                                            <div class="layui-form-label">是否置顶</div>
-                                            <div class="layui-input-block">
-                                                <input type="radio" name="is_top" value="1" title="置顶">
-                                                <input type="radio" name="is_top" value="0" title="不置顶">
-                                            </div>
-                                        </div>
-                                        <div class="layui-form-item">
-                                            <div class="layui-form-label">跳转链接</div>
-                                            <div class="layui-input-block">
-                                                <input type="text" name="jump_to_url" value="{$post->getData('jump_to_url')}" class="layui-input">
-                                            </div>
-                                        </div>
-                                        <div class="layui-form-item">
-                                            <div class="layui-form-label">跳转按钮名称</div>
-                                            <div class="layui-input-block">
-                                                <input type="text" name="jump_to_btn_title" value="{$post->getData('jump_to_btn_title')}" class="layui-input">
-                                            </div>
-                                        </div>
                                         
-                                        <div class="layui-form-item">
+                                        
-                                            <div class="layui-form-label">跳转链接状态</div>
-                                            <div class="layui-input-block">
-                                                <input type="radio" name="jump_to_url_status" value="0" title="不显示">
-                                                <input type="radio" name="jump_to_url_status" value="1" title="仅显示">
-                                                <input type="radio" name="jump_to_url_status" value="2" title="自动跳转">
-                                            </div>
-                                        </div>
-                                        <div class="layui-form-item">
-                                            <div class="layui-form-label">
-                                                作者名称
-                                                <p class="layui-word-aux">不填使用系统设置的名称</p>
-                                            </div>
-                                            <div class="layui-input-block">
-                                                <input type="text" name="author_name" value="{$post->getData('author_name')}" class="layui-input">
-                                            </div>
-                                        </div>
-                                        <div class="layui-form-item">
-                                            <div class="layui-form-label">排序</div>
-                                            <div class="layui-input-block">
-                                                <input type="number" name="sort" value="{$post->getData('sort')}" class="layui-input">
-                                                <div class="layui-form-mid layui-word-aux">越大越靠前</div>
-                                            </div>
-                                        </div>
-                                        <div class="layui-form-item">
-                                            <div class="layui-form-label">模板</div>
-                                            <div class="layui-input-block">
-                                                <select name="tpl_name">
-                                                    {volist name=':config("view_type.post")' id='tpl_name'}
-                                                    <option value="{$key}">{$tpl_name}</option>
-                                                    {/volist}
-                                                </select>
-                                            </div>
-                                        </div>
                                     </div>
                                 </fieldset>
                             </div>
@@ -283,79 +247,7 @@
                 index: 0,
                 lenght: 0
             }
-            var quill = new Quill('#editor', {
-                theme: 'snow',
-                modules: {
-                    toolbar: '#toolbar',
            
-                },
-
-            });
-
-
-            quill.setContents(JSON.parse(window.atob($('#content').text())))
-
-            quill.on('selection-change', function (range, oldRange, source) {
-                if (range) {
-                    if (range.length == 0) {
-                        console.log('User cursor is on', range.index);
-                    } else {
-                        var text = quill.getText(range.index, range.length);
-                        console.log('User has highlighted', text);
-                    }
-                    currentRange = range;
-                    console.log(currentRange);
-
-                } else {
-                    console.log('Cursor not in the editor');
-                }
-
-
-            });
-
-            quill.on('text-change', function (delta, oldDelta, source) {
-                currentRange.index = delta.ops[0].retain
-                if (source == 'api') {
-                    console.log("An API call triggered this change.");
-                } else if (source == 'user') {
-                    console.log("A user action triggered this change.");
-                }
-                if (currentSecond - lastUpdateSecond > 30) {
-
-                    var formData = {
-                        'id': '{$post.id}'
-                    };
-
-                    formData.content = quill.getContents().ops
-                    formData.content_html = $('#editor .ql-editor').html()
-
-                    $.post('{:url("update")}', formData, function (result) {
-                        lastUpdateSecond = currentSecond
-                        layer.msg('自动保存成功', {
-                            offset: 't'
-                        })
-
-                    })
-                }
-            });
-
-            upload.render({
-                elem: '.ql-image',
-                url: '{:url("File/save")}',
-                data: {
-                    type: 4,
-                    dir: 'article'
-                },
-                accept: 'images',
-                done: function (result) {
-                    if (result.code == 0) {
-                        layer.msg('上传成功');
-                        quill.insertEmbed(++currentRange.index, 'image', result.data.src);
-                    } else {
-                        layer.msg(result.msg)
-                    }
-                }
-            })
             upload.render({
                 elem: '.upload-poster',
                 url: '{:url("File/save")}',
@@ -374,10 +266,7 @@
                     }
                 }
             })
-            var toolbar = quill.getModule('toolbar');
+          
-            toolbar.addHandler('image', function () {
-                return false;
-            });
 
             form.val('*', {
                 status: '{$post->getData("status")}',
@@ -390,8 +279,6 @@
 
                 var formData = data.field;
 
-                formData.content = quill.getContents().ops
-                formData.content_html = $('#editor .ql-editor').html()
                 window.loading = layer.load()
                 $.post('{:url("update")}', formData, function (result) {
                     layer.close(window.loading)

view/admin/post/edit_content.html

@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>内容管理</title>
+    {include file="common/_require"}
+    <link href="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/index.min.js"></script>
+    <script>
+        var currentHeaderNavItem = 'Post-{$Request.param.type|default="1"}';
+        var currentLeftNavItem = 'post-{$Request.param.type|default="1"}';
+    </script>
+
+
+    <style>
+        html,
+        body {
+            background-color: #fff;
+            height: 100%;
+            overflow: hidden;
+            color: #333;
+        }
+
+        #top-container {
+            border-bottom: 1px solid #e8e8e8;
+            padding-left: 30px;
+        }
+
+        #editor-toolbar {
+
+            background-color: #FCFCFC;
+            margin: 0 auto;
+        }
+
+        #content {
+            height: calc(100% - 440px);
+            background-color: rgb(245, 245, 245);
+            overflow-y: auto;
+            position: relative;
+        }
+
+        #editor-container {
+            width: 850px;
+            margin: 30px auto 30px auto;
+            background-color: #fff;
+            padding: 20px 50px 50px 50px;
+            border: 1px solid #e8e8e8;
+            box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
+        }
+
+        #title-container {
+            padding: 20px 0;
+            border-bottom: 1px solid #e8e8e8;
+        }
+
+        #title-container input {
+            font-size: 30px;
+            border: 0;
+            outline: none;
+            width: 100%;
+            line-height: 1;
+        }
+
+        #editor-text-area {
+            min-height: 500px;
+            margin-top: 20px;
+        }
+    </style>
+</head>
+
+<body class="layui-layout-body">
+
+    <div class="layui-layout layui-layout-admin">
+        {include file="common/_header"}
+
+        {include file="common/left_post"}
+
+        <div class="layui-body">
+
+            <div style="">
+                <div class="">
+
+                    <div style="border: 1px solid #e8e8e8;">
+                        <div id="editor-toolbar"></div>
+                    </div>
+                    <div id="content">
+                        <div id="editor-container">
+                            <div id="title-container">
+                                <input id="title-input" value="{$post->title}">
+                            </div>
+                            <div id="editor-text-area"></div>
+                        </div>
+                    </div>
+                    <div id="content-data" style="display: none;">{:urlencode($post->content_html)}</div>
+                </div>
+            </div>
+        </div>
+
+
+        {include file="common/_footer"}
+
+    </div>
+
+
+    <script>
+
+
+        var lastContent = '';
+
+        var contentSaveLock = true;
+
+        function autoSaveContent() {
+
+
+            if (contentSaveLock) {
+                setTimeout(() => {
+                    autoSaveContent();
+                }, 5000);
+            } else {
+                contentSaveLock = true;
+                $.post('{:url("update")}', {
+                    content_html: editor.getHtml(),
+                    id: '{$post->id}'
+                }, function (result) {
+
+                    setTimeout(() => {
+                        autoSaveContent();
+                    }, 5000);
+                })
+            }
+
+
+        }
+
+        const E = window.wangEditor;
+
+        const editorConfig = { MENU_CONF: {} }
+        editorConfig.placeholder = '请输入内容'
+        editorConfig.scroll = false // 禁止编辑器滚动
+        editorConfig.MENU_CONF['uploadImage'] = {
+            fieldName: 'file',
+        }
+        editorConfig.onChange = (editor) => {
+            console.log('content', editor)
+            contentSaveLock = false;
+        }
+
+        // 先创建 editor
+        const editor = E.createEditor({
+            selector: '#editor-text-area',
+            content: [],
+            html: decodeURIComponent($('#content-data').html()),
+            config: editorConfig
+        })
+
+        // 创建 toolbar
+        const toolbar = E.createToolbar({
+            editor,
+            selector: '#editor-toolbar',
+            config: {
+                excludeKeys: 'fullScreen',
+            },
+
+        })
+
+        setTimeout(() => {
+            $('#content').height(window.innerHeight - $('#editor-toolbar').outerHeight() - 30 - 45 - 7)
+        }, 300);
+
+
+        // 点击空白处 focus 编辑器
+        document.getElementById('editor-text-area').addEventListener('click', e => {
+            if (e.target.id === 'editor-text-area') {
+                editor.blur()
+                editor.focus(true) // focus 到末尾
+            }
+        })
+
+
+        $('#title-input').change(function () {
+            window.loading = layer.load()
+            $.post('{:url("update")}', {
+                title: $('#title-input').val(),
+                id: '{$post->id}'
+            }, function (result) {
+                layer.close(window.loading)
+
+
+            })
+        })
+
+
+    </script>
+
+</body>
+
+</html>

view/admin/post/index.html

@@ -40,9 +40,9 @@
                         <thead>
                             <tr>
                                 <th>ID</th>
-                <th >名称</th>
+                                <th>名称</th>
                                 <th>封面</th>
-                <th >简介</th>
+                                <th>简介</th>
                                 <th>排序</th>
                                 <th>状态</th>
                                 <th>分类</th>
@@ -74,7 +74,8 @@
                                 <td>
                                     <div class="layui-btn-container">
                                         <a class="layui-btn layui-btn-sm" target="_blank" href="{$vo.read_url}">查看</a>
-                    <a class="layui-btn layui-btn-sm" href="{:url('edit',['id'=>$vo.id,'type'=>$Request.param.type])}">编辑</a>
+                                        <a class="layui-btn layui-btn-sm" href="{:url('edit',['id'=>$vo.id,'type'=>$Request.param.type])}">设置</a>
+                                        <a class="layui-btn layui-btn-sm" href="{:url('editContent',['id'=>$vo.id,'type'=>$Request.param.type])}">编辑</a>
                                         <div class="layui-btn layui-btn-sm delete">删除</div>
                                     </div>
                                 </td>