add: 编辑器

pages/post/_id.vue

@@ -32,13 +32,24 @@ div
           .comment-author {{ item.comment_author }}
           .comment-content {{ item.comment_content }}
           .comment-info {{ item.comment_date }}
-            span.reply 回复
-      p(v-if="!comments.length", style="color: #cecece; text-align: center; margin-top: 40px") 暂无
-      .comment-userinfo
-        .comment-avatar
-          img(:src="'https://picsum.photos/100/100/?blur=1'")
-        .comment-nickname 张三
-      #editor
+            span.reply(@click="reply(item.comment_ID)") 回复
+        .comment-item(v-for="(i, inx) in item.children", :key="inx", style="margin-top: 15px; margin-left: 50px; background-color: #eeeeee; border-radius: 4px;")
+          .comment-avatar
+            img(:src="i.comment_author_avatar_url ? i.comment_author_avatar_url : 'https://picsum.photos/100/100/?blur=' + i.user_id")
+          .comment-area
+            .comment-author {{ i.comment_author }}
+            .comment-content {{ i.comment_content }}
+            .comment-info {{ i.comment_date }}
+              span.reply(@click="reply(item.comment_ID, i.comment_ID)") 回复
+      p(v-if="!comments.length", style="color: #cecece; text-align: center; margin-top: 40px") 暂无内容
+      .comment-default-commit
+        .comment-userinfo
+          .comment-avatar
+            img(:src="'https://picsum.photos/100/100/?blur=1'")
+          .comment-nickname 张三
+        #editor
+      .comment-default-commit(v-show="replyID")
+        #editor-reply
     ins.adsbygoogle(style="display:block; text-align:center; margin-top:20px;", data-ad-layout="in-article", data-ad-format="fluid", data-ad-client="ca-pub-2143583075951360", data-ad-slot="4741804954")
     .articelRightToc(v-show="articels.post_toc_show && showRightToc", @click="articelRightTocClick")
       .articelTitle 目录
@@ -78,14 +89,15 @@ export default {
       comments,
       commentAmount,
       showRightToc: false,
-      tocIds: result.post_toc_ids
+      tocIds: result.post_toc_ids,
+      replyID: null
     }
   },
   mounted () {
     // 创建编辑器
     if (process.client) {
       if (!window.editorObj && window.Vditor) {
-        window.editorObj = new window.Vditor('editor', {
+        const editorConfig = {
           toolbar: [
             'emoji',
             'headings',
@@ -131,9 +143,9 @@ export default {
             enable: true
           },
           placeholder: '我们书写的不是代码，而是人生'
-        })
-        // window.editorObj.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
-        // window.editorObj.create()
+        }
+        window.editorObj = new window.Vditor('editor', editorConfig)
+        window.editorReplyObj = new window.Vditor('editor-reply', editorConfig)
       }
     }
 
@@ -311,6 +323,9 @@ export default {
         title: '感谢支持',
         text: '<img src="https://cdn.wyr.me/imgs/reward.jpg" style="max-width: 100%; width: 400px"/>'
       })
+    },
+    reply (id) {
+      this.replyID = id
     }
   },
   head () {
@@ -393,8 +408,8 @@ export default {
     margin-bottom 30px
 
   .comment-item
-    margin-top 20px
-    margin-left 10px
+    margin-top 10px
+    padding 10px 8px
 
     .comment-avatar
       float left
@@ -428,7 +443,8 @@ export default {
 
   .comment-userinfo
     margin-top 90px
-    margin-left 10px
+    margin-left 5px
+    padding 10px 5px
 
     .comment-avatar
       float left
@@ -449,7 +465,7 @@ export default {
       line-height 70px
 
   #editor
-    margin-top 20px
+    margin-top 10px
     margin-bottom 10px
 
 .btnFooter