refactor: pull out the markdown editor component. (halo-dev/console#75)

src/components/editor/MarkdownEditor.vue

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <halo-editor
+      ref="md"
+      v-model="originalContentData"
+      :boxShadow="false"
+      :toolbars="toolbars"
+      :ishljs="true"
+      :autofocus="false"
+      @imgAdd="handleAttachmentUpload"
+      @save="handleSaveDraft"
+    />
+  </div>
+</template>
+<script>
+import { toolbars } from '@/core/const'
+import { haloEditor } from 'halo-editor'
+import 'halo-editor/dist/css/index.css'
+import attachmentApi from '@/api/attachment'
+export default {
+  name: 'MarkdownEditor',
+  components: {
+    haloEditor
+  },
+  props: {
+    originalContent: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      toolbars,
+      originalContentData: ''
+    }
+  },
+  watch: {
+    originalContent(val) {
+      this.originalContentData = val
+    },
+    originalContentData(val) {
+      this.$emit('onChange', val)
+    }
+  },
+  methods: {
+    handleAttachmentUpload(pos, $file) {
+      var formdata = new FormData()
+      formdata.append('file', $file)
+      attachmentApi.upload(formdata).then(response => {
+        var responseObject = response.data
+
+        if (responseObject.status === 200) {
+          var HaloEditor = this.$refs.md
+          HaloEditor.$img2Url(pos, encodeURI(responseObject.data.path))
+          this.$message.success('图片上传成功！')
+        } else {
+          this.$message.error('图片上传失败：' + responseObject.message)
+        }
+      })
+    },
+    handleSaveDraft() {
+      this.$emit('onSaveDraft')
+    }
+  }
+}
+</script>

src/views/post/PostEdit.vue

@@ -11,15 +11,10 @@
         </div>
 
         <div id="editor">
-          <halo-editor
-            ref="md"
-            v-model="postToStage.originalContent"
-            :boxShadow="false"
-            :toolbars="toolbars"
-            :ishljs="true"
-            :autofocus="false"
-            @imgAdd="handleAttachmentUpload"
-            @save="handleSaveDraft(true)"
+          <MarkdownEditor
+            :originalContent="postToStage.originalContent"
+            @onSaveDraft="handleSaveDraft(true)"
+            @onChange="onContentChange"
           />
         </div>
       </a-col>
@@ -73,23 +68,19 @@ import moment from 'moment'
 import PostSettingDrawer from './components/PostSettingDrawer'
 import AttachmentDrawer from '../attachment/components/AttachmentDrawer'
 import FooterToolBar from '@/components/FooterToolbar'
-import { toolbars } from '@/core/const'
-import { haloEditor } from 'halo-editor'
-import 'halo-editor/dist/css/index.css'
+import MarkdownEditor from '@/components/editor/MarkdownEditor'
 
 import postApi from '@/api/post'
-import attachmentApi from '@/api/attachment'
 export default {
   mixins: [mixin, mixinDevice],
   components: {
     PostSettingDrawer,
-    haloEditor,
     FooterToolBar,
-    AttachmentDrawer
+    AttachmentDrawer,
+    MarkdownEditor
   },
   data() {
     return {
-      toolbars,
       attachmentDrawerVisible: false,
       postSettingVisible: false,
       postToStage: {},
@@ -218,21 +209,6 @@ export default {
           })
       }
     },
-    handleAttachmentUpload(pos, $file) {
-      var formdata = new FormData()
-      formdata.append('file', $file)
-      attachmentApi.upload(formdata).then(response => {
-        var responseObject = response.data
-
-        if (responseObject.status === 200) {
-          var HaloEditor = this.$refs.md
-          HaloEditor.$img2Url(pos, encodeURI(responseObject.data.path))
-          this.$message.success('图片上传成功！')
-        } else {
-          this.$message.error('图片上传失败：' + responseObject.message)
-        }
-      })
-    },
     handleShowPostSetting() {
       this.postSettingVisible = true
     },
@@ -271,6 +247,9 @@ export default {
         })
       }
     },
+    onContentChange(val) {
+      this.postToStage.originalContent = val
+    },
     // 关闭文章设置抽屉
     onPostSettingsClose() {
       this.postSettingVisible = false

src/views/sheet/SheetEdit.vue

@@ -10,15 +10,10 @@
           />
         </div>
         <div id="editor">
-          <halo-editor
-            ref="md"
-            v-model="sheetToStage.originalContent"
-            :boxShadow="false"
-            :toolbars="toolbars"
-            :ishljs="true"
-            :autofocus="false"
-            @imgAdd="handleAttachmentUpload"
-            @save="handleSaveDraft"
+          <MarkdownEditor
+            :originalContent="sheetToStage.originalContent"
+            @onSaveDraft="handleSaveDraft"
+            @onChange="onContentChange"
           />
         </div>
       </a-col>
@@ -64,25 +59,21 @@
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 import { mapGetters } from 'vuex'
 import moment from 'moment'
-import { toolbars } from '@/core/const'
 import SheetSettingDrawer from './components/SheetSettingDrawer'
 import AttachmentDrawer from '../attachment/components/AttachmentDrawer'
 import FooterToolBar from '@/components/FooterToolbar'
-import { haloEditor } from 'halo-editor'
-import 'halo-editor/dist/css/index.css'
+import MarkdownEditor from '@/components/editor/MarkdownEditor'
 import sheetApi from '@/api/sheet'
-import attachmentApi from '@/api/attachment'
 export default {
   components: {
-    haloEditor,
     FooterToolBar,
     AttachmentDrawer,
-    SheetSettingDrawer
+    SheetSettingDrawer,
+    MarkdownEditor
   },
   mixins: [mixin, mixinDevice],
   data() {
     return {
-      toolbars,
       attachmentDrawerVisible: false,
       sheetSettingVisible: false,
       sheetToStage: {},
@@ -193,21 +184,6 @@ export default {
           })
       }
     },
-    handleAttachmentUpload(pos, $file) {
-      var formdata = new FormData()
-      formdata.append('file', $file)
-      attachmentApi.upload(formdata).then(response => {
-        var responseObject = response.data
-
-        if (responseObject.status === 200) {
-          var HaloEditor = this.$refs.md
-          HaloEditor.$img2Url(pos, encodeURI(responseObject.data.path))
-          this.$message.success('图片上传成功！')
-        } else {
-          this.$message.error('图片上传失败：' + responseObject.message)
-        }
-      })
-    },
     handleShowSheetSetting() {
       this.sheetSettingVisible = true
     },
@@ -244,6 +220,9 @@ export default {
         })
       }
     },
+    onContentChange(val) {
+      this.sheetToStage.originalContent = val
+    },
     onSheetSettingsClose() {
       this.sheetSettingVisible = false
     },