修改：文章编辑界面

src/views/markdown/EditElement.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="edit-div"
+  <div id="edit-div"
        v-html="innerText"
        :contenteditable="canEdit"
        @focus="isLocked = true"
@@ -22,39 +22,41 @@ export default{
   },
   data(){
     return {
-      innerText: this.value,
-      isLocked: false
+      innerText: '',
+      isLocked: false,
     }
   },
   watch: {
-    'value'(){
+    value(value){
       if (!this.isLocked || !this.innerText) {
-        this.innerText = this.value;
+        console.log('value', value)
+        this.innerText = value
+        document.getElementById('edit-div').innerHTML = value
       }
     }
   },
   methods: {
     changeText(){
-      this.$emit('input', this.$el.innerHTML);
+      this.$emit('input', this.$el.innerHTML)
     }
   }
 }
 </script>
 <style lang="scss" rel="stylesheet/scss">
 .edit-div {
-  //overflow: auto;
-  //word-break: break-all;
-  //outline: none;
-  //user-select: text;
-  //white-space: pre-wrap;
-  //text-align: left;
-  //&[contenteditable=true]{
-  //  user-modify: read-write-plaintext-only;
-  //  &:empty:before {
-  //    content: attr(placeholder);
-  //    display: block;
-  //    color: #ccc;
-  //  }
-  //}
+  overflow: auto;
+  word-break: break-all;
+  outline: none;
+  user-select: text;
+  white-space: pre-wrap;
+  text-align: left;
+  &[contenteditable=true]{
+    user-modify: read-write-plaintext-only;
+    &:empty:before {
+      content: attr(placeholder);
+      display: block;
+      color: #ccc;
+    }
+  }
 }
 </style>

src/views/markdown/index.vue

@@ -10,6 +10,7 @@
           <div class="url-slug">
             <div>{{ articleLink }}</div>
             <edit-element
+              ref="editElement"
               class="mark-setting-input"
               v-model="file.slug"
               placeholder="缩略名"
@@ -31,9 +32,9 @@
           <el-date-picker
             v-model="file.uploadDate"
             type="datetime"
+            size="small"
             value-format="yyyy-MM-dd HH:mm:ss"
-            format="yyyy-MM-dd HH:mm:ss"
-            placeholder="____-__-__ __:__">
+            format="yyyy-MM-dd HH:mm:ss">
           </el-date-picker>
           <p class="mark-setting-label">分类：</p>
           <el-tree
@@ -156,6 +157,7 @@
     }]
 
   export default {
+    inject: ['appReload'],
     name: 'MarkdownEditor',
     components: {
       EditElement,
@@ -195,7 +197,7 @@
         treeProps: {
           label: 'name',
         },
-        releaseTime: undefined
+        releaseTime: undefined,
       }
     },
     mounted() {
@@ -240,6 +242,7 @@
         this.$emit('update:hasChange', true)
       },
       getMarkdown(isReload){
+        this.draft = false
         if(this.$route.query.id){
           this.editStatus = true
           markdownApi.getMarkdown({
@@ -251,6 +254,7 @@
                 this.currentDarft = true
               }
             } else {
+              this.currentDarft = false
               this.file = res.data
             }
             // 初始化编辑器
@@ -414,7 +418,6 @@
       saveDraft() {
         this.draft = true
         this.update('保存草稿成功')
-        this.getMarkdown(true)
       },
       release() {
         this.draft = false
@@ -433,12 +436,12 @@
             fileId: this.$route.query.id,
             username: this.$store.state.user.name
           }).then(() => {
-            this.reload()
             this.$message({
               message: "草稿已被删除",
               type: 'success',
               duration : 1000
             })
+            this.reload()
           })
         })
       },
@@ -464,14 +467,21 @@
             currentDirectory: this.storageLocation,
             contentText: this.contentEditor.getValue(),
             uploadDate: this.file.uploadDate,
-          }).then(() => {
+          }).then((res) => {
             this.$emit('update:hasChange', false)
             this.updating = false
             this.$message({
               message: message ? message : "发布成功",
               type: 'success',
               duration : 1000
-            });
+            })
+            if(this.draft){
+              this.$router.push({path: this.$route.path, query: {operation: 'editor', id: res.data}})
+              this.$emit('onTitle', this.filename)
+              this.reload()
+            } else {
+              this.$emit('onRelease')
+            }
           }).catch(()=> {
             this.updating = false
           })
@@ -639,6 +649,7 @@
     border-radius: 2px;
     color: #666;
     width: fit-content;
+    min-width: 35px;
     background-color: #ecf5ff;
     &:focus {
       outline: none;

src/views/setting/articles/articleManager.vue

@@ -9,7 +9,7 @@
       @open="openDialog"
       @close="closeDialog"
     >
-      <markdown-editor ref="editor" :has-change.sync="hasChange" @onTitle="onTitle"></markdown-editor>
+      <markdown-editor ref="editor" :has-change.sync="hasChange" @onTitle="onTitle" @onRelease="onRelease"></markdown-editor>
     </el-dialog>
     <el-card class="box-card">
       <div slot="header">
@@ -368,6 +368,10 @@ export default {
     openDialog() {
       this.pageTitle = '撰写新文章'
     },
+    onRelease() {
+      this.newArticleDialogVisible = false
+      this.closeDialog()
+    },
     closeDialog(){
       this.$router.replace({path: this.$route.path})
       window.onbeforeunload = null