add: 编辑器

pages/post/_id.vue

@@ -23,19 +23,22 @@ div
     .tools
       .reward(@click="reward") 打赏
     .comment
-      p(style="color: #777; margin-bottom: 30px") 交流区
+      .comment-title 交流区
         span(v-if="comments.length") ({{commentAmount}})
-      #editor
-        p 说点什么吧...
       .comment-item(v-for="(item, index) in comments" :key="index")
         .comment-avatar
-          img(:src="item.comment_author_avatar_url ? item.comment_author_avatar_url : 'https://picsum.photos/200/200/?blur=' + item.user_id")
+          img(:src="item.comment_author_avatar_url ? item.comment_author_avatar_url : 'https://picsum.photos/100/100/?blur=' + item.user_id")
         .comment-area
           .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
     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 目录
@@ -81,17 +84,53 @@ export default {
   mounted () {
     // 创建编辑器
     if (process.client) {
-      if (!window.editorObj && window.WangEditor) {
+      if (!window.editorObj && window.Vditor) {
         window.editorObj = new window.Vditor('editor', {
+          toolbar: [
+            'emoji',
+            'headings',
+            'bold',
+            'italic',
+            'strike',
+            'link',
+            'list',
+            'ordered-list',
+            'outdent',
+            'indent',
+            'quote',
+            'line',
+            'code',
+            'inline-code',
+            'upload',
+            'table',
+            'insert-before',
+            'insert-after',
+            'undo',
+            'redo',
+            'fullscreen',
+            {
+              name: 'more',
+              toolbar: [
+                'edit-mode',
+                'check',
+                'both',
+                'code-theme',
+                'content-theme',
+                'export',
+                'outline',
+                'preview',
+                'format',
+                'devtools'
+              ]
+            }],
+          height: 250,
           toolbarConfig: {
             pin: true
           },
           cache: {
-            enable: false
+            enable: true
           },
-          after: () => {
+          placeholder: '我们书写的不是代码，而是人生'
-            this.contentEditor.setValue('hello, Vditor + Vue!')
-          }
         })
         // window.editorObj.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
         // window.editorObj.create()
@@ -347,10 +386,15 @@ export default {
 
 .comment
   width 100%
-  margin-top 45px
+  margin-top 60px
+
+  .comment-title
+    color #777
+    margin-bottom 30px
 
   .comment-item
     margin-top 20px
+    margin-left 10px
 
     .comment-avatar
       float left
@@ -382,6 +426,32 @@ export default {
           user-select none
           margin-left 10px
 
+  .comment-userinfo
+    margin-top 90px
+    margin-left 10px
+
+    .comment-avatar
+      float left
+      margin-top 3px
+
+      img
+        border-radius 50%
+        width 60px
+        border-style none
+        cursor pointer
+        box-sizing border-box
+        margin 0
+
+    .comment-nickname
+      color #a1887f
+      margin-left 80px
+      height 70px
+      line-height 70px
+
+  #editor
+    margin-top 20px
+    margin-bottom 10px
+
 .btnFooter
   font-size 12px
   margin-top 25px