Add rich text editor. (halo-dev/console#76)

* refactor: pull out the editor component.

* feat: support rich text editor.

src/api/sheet.js

@@ -48,6 +48,16 @@ sheetApi.update = (sheetId, sheetToUpdate, autoSave) => {
   })
 }
 
+sheetApi.updateDraft = (sheetId, content) => {
+  return service({
+    url: `${baseUrl}/${sheetId}/status/draft/content`,
+    method: 'put',
+    data: {
+      content: content
+    }
+  })
+}
+
 sheetApi.updateStatus = (sheetId, status) => {
   return service({
     url: `${baseUrl}/${sheetId}/${status}`,

src/components/editor/MarkdownEditor.vue

@@ -2,7 +2,7 @@
   <div>
     <halo-editor
       ref="md"
-      v-model="originalContentData"
+      v-model="originalContent"
       :boxShadow="false"
       :toolbars="toolbars"
       :ishljs="true"
@@ -40,7 +40,7 @@ export default {
       this.originalContentData = val
     },
     originalContentData(val) {
-      this.$emit('onChange', val)
+      this.$emit('onContentChange', val)
     }
   },
   methods: {

src/components/editor/RichTextEditor.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <a-input
+      type="textarea"
+      v-model="originalContent"
+      :rows="16"
+    />
+  </div>
+</template>
+<script>
+export default {
+  name: 'RichTextEditor',
+  props: {
+    originalContent: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      originalContentData: ''
+    }
+  },
+  watch: {
+    originalContent(val) {
+      this.originalContentData = val
+    },
+    originalContentData(val) {
+      this.$emit('onContentChange', val)
+    }
+  }
+}
+</script>

src/store/modules/option.js

@@ -12,7 +12,8 @@ const keys = [
   'sheet_prefix',
   'post_permalink_type',
   'archives_prefix',
-  'path_suffix'
+  'path_suffix',
+  'default_editor'
 ]
 const option = {
   state: {

src/views/post/PostEdit.vue

@@ -12,9 +12,16 @@
 
         <div id="editor">
           <MarkdownEditor
+            v-if="postToStage.editorType=='MARKDOWN'"
             :originalContent="postToStage.originalContent"
             @onSaveDraft="handleSaveDraft(true)"
-            @onChange="onContentChange"
+            @onContentChange="onContentChange"
+          />
+
+          <RichTextEditor
+            v-else
+            :originalContent="postToStage.originalContent"
+            @onContentChange="onContentChange"
           />
         </div>
       </a-col>
@@ -69,6 +76,7 @@ import PostSettingDrawer from './components/PostSettingDrawer'
 import AttachmentDrawer from '../attachment/components/AttachmentDrawer'
 import FooterToolBar from '@/components/FooterToolbar'
 import MarkdownEditor from '@/components/editor/MarkdownEditor'
+import RichTextEditor from '@/components/editor/RichTextEditor'
 
 import postApi from '@/api/post'
 export default {
@@ -77,7 +85,8 @@ export default {
     PostSettingDrawer,
     FooterToolBar,
     AttachmentDrawer,
-    MarkdownEditor
+    MarkdownEditor,
+    RichTextEditor
   },
   data() {
     return {
@@ -151,6 +160,9 @@ export default {
       }
       return '当前页面数据未保存，确定要离开吗？'
     }
+    if (!this.postToStage.editorType) {
+      this.postToStage.editorType = this.options.default_editor
+    }
   },
   watch: {
     temporaryContent: function(newValue, oldValue) {
@@ -190,6 +202,7 @@ export default {
             .then(response => {
               this.$log.debug('Updated post', response.data.data)
               this.$message.success('保存草稿成功！')
+              this.postToStage = response.data.data
             })
             .finally(() => {
               this.saving = false

src/views/sheet/SheetEdit.vue

@@ -9,11 +9,19 @@
             placeholder="请输入页面标题"
           />
         </div>
+
         <div id="editor">
           <MarkdownEditor
+            v-if="sheetToStage.editorType=='MARKDOWN'"
             :originalContent="sheetToStage.originalContent"
-            @onSaveDraft="handleSaveDraft"
+            @onSaveDraft="handleSaveDraft(true)"
-            @onChange="onContentChange"
+            @onContentChange="onContentChange"
+          />
+
+          <RichTextEditor
+            v-else
+            :originalContent="sheetToStage.originalContent"
+            @onContentChange="onContentChange"
           />
         </div>
       </a-col>
@@ -33,7 +41,7 @@
     <footer-tool-bar :style="{ width: isSideMenu() && isDesktop() ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'}">
       <a-button
         type="danger"
-        @click="handleSaveDraft"
+        @click="handleSaveDraft(false)"
         :disabled="saving"
       >保存草稿</a-button>
       <a-button
@@ -63,13 +71,16 @@ import SheetSettingDrawer from './components/SheetSettingDrawer'
 import AttachmentDrawer from '../attachment/components/AttachmentDrawer'
 import FooterToolBar from '@/components/FooterToolbar'
 import MarkdownEditor from '@/components/editor/MarkdownEditor'
+import RichTextEditor from '@/components/editor/RichTextEditor'
+
 import sheetApi from '@/api/sheet'
 export default {
   components: {
     FooterToolBar,
     AttachmentDrawer,
     SheetSettingDrawer,
-    MarkdownEditor
+    MarkdownEditor,
+    RichTextEditor
   },
   mixins: [mixin, mixinDevice],
   data() {
@@ -140,6 +151,9 @@ export default {
       }
       return '当前页面数据未保存，确定要离开吗？'
     }
+    if (!this.sheetToStage.editorType) {
+      this.sheetToStage.editorType = this.options.default_editor
+    }
   },
   watch: {
     temporaryContent: function(newValue, oldValue) {
@@ -155,22 +169,35 @@ export default {
     ...mapGetters(['options'])
   },
   methods: {
-    handleSaveDraft() {
+    handleSaveDraft(draftOnly = false) {
+      this.$log.debug('Draft only: ' + draftOnly)
       this.sheetToStage.status = 'DRAFT'
-      this.saving = true
       if (!this.sheetToStage.title) {
         this.sheetToStage.title = moment(new Date()).format('YYYY-MM-DD-HH-mm-ss')
       }
+      this.saving = true
       if (this.sheetToStage.id) {
+        if (draftOnly) {
           sheetApi
-          .update(this.sheetToStage.id, this.sheetToStage, false)
+            .updateDraft(this.sheetToStage.id, this.sheetToStage.originalContent)
             .then(response => {
-            this.$log.debug('Updated sheet', response.data.data)
               this.$message.success('保存草稿成功！')
             })
             .finally(() => {
               this.saving = false
             })
+        } else {
+          sheetApi
+            .update(this.sheetToStage.id, this.sheetToStage, false)
+            .then(response => {
+              this.$log.debug('Updated sheet', response.data.data)
+              this.$message.success('保存草稿成功！')
+              this.sheetToStage = response.data.data
+            })
+            .finally(() => {
+              this.saving = false
+            })
+        }
       } else {
         sheetApi
           .create(this.sheetToStage, false)

src/views/system/OptionForm.vue

@@ -103,6 +103,12 @@
                 layout="vertical"
                 :wrapperCol="wrapperCol"
               >
+                <a-form-item label="默认编辑器：">
+                  <a-select v-model="options.default_editor">
+                    <a-select-option value="MARKDOWN">Markdown 编辑器</a-select-option>
+                    <a-select-option value="RICHTEXT">富文本编辑器</a-select-option>
+                  </a-select>
+                </a-form-item>
                 <a-form-item label="首页文章排序：">
                   <a-select v-model="options.post_index_sort">
                     <a-select-option value="createTime">创建时间</a-select-option>