From 953affe0c765aa78304df91388acac19b8d65b5e Mon Sep 17 00:00:00 2001
From: chenqi <1535985458@qq.com>
Date: Wed, 18 May 2022 07:27:22 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat(vue):=20=E5=BC=95=E5=85=A5=E5=AF=8C?=
 =?UTF-8?q?=E6=96=87=E6=9C=AC=E7=BC=96=E8=BE=91=E5=99=A8mavon-editor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/package.json                          |   2 +-
 front/src/components/CustomEditor/index.vue | 116 ++++++++++++++++++++
 front/src/views/doc/edit/index.vue          |   8 +-
 3 files changed, 123 insertions(+), 3 deletions(-)
 create mode 100644 front/src/components/CustomEditor/index.vue

diff --git a/front/package.json b/front/package.json
index 28539f36..cde39e9b 100644
--- a/front/package.json
+++ b/front/package.json
@@ -22,7 +22,7 @@
     "js-cookie": "2.2.0",
     "js-md5": "^0.7.3",
     "jszip": "^3.5.0",
-    "mavon-editor": "2.7.7",
+    "mavon-editor": "^2.7.7",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
diff --git a/front/src/components/CustomEditor/index.vue b/front/src/components/CustomEditor/index.vue
new file mode 100644
index 00000000..1de375f1
--- /dev/null
+++ b/front/src/components/CustomEditor/index.vue
@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <mavon-editor
+      ref="md"
+      v-model="content"
+      :ishljs="true"
+      :editable="editable"
+      :subfield="showInfo.subfield"
+      :toolbars-flag="showInfo.toolbarsFlag"
+      :default-open="showInfo.defaultOpen"
+      code-style="atom-one-dark"
+      :toolbars="toolbars"
+      :style="{'font-size': fontSize + 'px', 'min-height': minHeight + 'px'}"
+    >
+    </mavon-editor>
+  </div>
+</template>
+<script>
+
+import { mavonEditor } from 'mavon-editor'
+import 'mavon-editor/dist/css/index.css'
+
+export default {
+  name: 'CustomEditor',
+  components: {
+    mavonEditor
+  },
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    height: {
+      type: [Number, String],
+      required: false,
+      default: 450
+    },
+    minHeight: {
+      type: [Number, String],
+      required: false,
+      default: 450
+    },
+    fontSize: {
+      type: [Number, String],
+      required: false,
+      default: 13
+    }
+  },
+  data() {
+    return {
+      content: '',
+      showInfo: {
+        defaultOpen: null,
+        toolbarsFlag: true,
+        subfield: true
+      },
+      toolbars: {
+        bold: true, // 粗体
+        italic: true, // 斜体
+        header: true, // 标题
+        underline: true, // 下划线
+        strikethrough: true, // 中划线
+        mark: false, // 标记
+        superscript: true, // 上角标
+        subscript: true, // 下角标
+        quote: true, // 引用
+        ol: true, // 有序列表
+        ul: true, // 无序列表
+        imagelink: false, // 图片链接
+        code: true, // code
+        fullscreen: false, // 全屏编辑
+        readmodel: false, // 沉浸式阅读
+        help: true, // 帮助
+        undo: false, // 上一步
+        redo: false, // 下一步
+        trash: true, // 清空
+        navigation: false, // 导航目录
+        preview: true
+      }
+    }
+  },
+  computed: {},
+  watch: {
+    value: {
+      handler: function(n, o) {
+        this.content = this.value
+      }
+    },
+    content: {
+      handler: function(n, o) {
+        this.$emit('input', n)
+      }
+    }
+  },
+  created() {
+    if (!this.editable) {
+      this.showInfo = {
+        defaultOpen: 'preview',
+        toolbarsFlag: false,
+        subfield: false
+      }
+    }
+  },
+  mounted() {
+  },
+  methods: {}
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/front/src/views/doc/edit/index.vue b/front/src/views/doc/edit/index.vue
index 848e223a..4254c528 100644
--- a/front/src/views/doc/edit/index.vue
+++ b/front/src/views/doc/edit/index.vue
@@ -17,7 +17,7 @@
             <el-input v-model="docInfo.name" maxlength="100" show-word-limit />
           </el-form-item>
           <el-form-item prop="description" :label="$ts('docDesc')">
-            <el-input v-model="docInfo.description" type="textarea" :rows="4" :placeholder="$ts('supportHtml')" show-word-limit />
+            <custom-editor :value="docInfo.description" :editable="true" @input="editorInput" />
           </el-form-item>
           <el-form-item prop="url" :label="$ts('requestUrl')">
             <el-input v-model="docInfo.url" class="input-with-select" maxlength="100" show-word-limit @input="onUrlInput">
@@ -239,9 +239,10 @@ import DocView from '../DocView'
 import EditTable from '../EditTable'
 import RootArrayTable from '../RootArrayTable'
 import {init_docInfo_complete_view} from "@/utils/common";
+import CustomEditor from '@/components/CustomEditor'
 
 export default {
-  components: { DocView, EditTable, RootArrayTable },
+  components: { CustomEditor, DocView, EditTable, RootArrayTable },
   data() {
     return {
       params: {},
@@ -688,6 +689,9 @@ name3:value3`,
         '2': 'json'
       }
       return map[this.importParamTemplateModel + ''] || ''
+    },
+    editorInput(content) {
+      this.docInfo.description = content
     }
   }
 }
-- 
Gitee


From 53f79b14fdd5380210f8b9647fb53d1613c57722 Mon Sep 17 00:00:00 2001
From: chenqi <1535985458@qq.com>
Date: Wed, 18 May 2022 08:55:19 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat(vue):=20=E6=8E=A5=E5=8F=A3=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3=E7=BC=96=E8=BE=91=E5=92=8C=E6=9F=A5=E7=9C=8B=E6=8F=8F?=
 =?UTF-8?q?=E8=BF=B0=E4=BB=A5=E5=8F=8A=E5=A4=87=E6=B3=A8=E7=9A=84=E5=9C=B0?=
 =?UTF-8?q?=E6=96=B9=E4=BD=BF=E7=94=A8=E5=AF=8C=E6=96=87=E6=9C=AC=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../index.vue                                 | 22 ++++++++++++-------
 front/src/views/doc/DocView/index.vue         |  7 +++---
 front/src/views/doc/edit/index.vue            | 14 +++++++-----
 3 files changed, 27 insertions(+), 16 deletions(-)
 rename front/src/components/{CustomEditor => RichTextEditor}/index.vue (87%)

diff --git a/front/src/components/CustomEditor/index.vue b/front/src/components/RichTextEditor/index.vue
similarity index 87%
rename from front/src/components/CustomEditor/index.vue
rename to front/src/components/RichTextEditor/index.vue
index 1de375f1..b3f19eb8 100644
--- a/front/src/components/CustomEditor/index.vue
+++ b/front/src/components/RichTextEditor/index.vue
@@ -5,7 +5,10 @@
       v-model="content"
       :ishljs="true"
       :editable="editable"
-      :subfield="showInfo.subfield"
+      :placeholder="placeholder"
+      :box-shadow="false"
+      :subfield="false"
+      :tab-size="2"
       :toolbars-flag="showInfo.toolbarsFlag"
       :default-open="showInfo.defaultOpen"
       code-style="atom-one-dark"
@@ -21,7 +24,7 @@ import { mavonEditor } from 'mavon-editor'
 import 'mavon-editor/dist/css/index.css'
 
 export default {
-  name: 'CustomEditor',
+  name: 'RichTextEditor',
   components: {
     mavonEditor
   },
@@ -35,15 +38,20 @@ export default {
       required: false,
       default: true
     },
+    placeholder: {
+      type: String,
+      required: false,
+      default: ''
+    },
     height: {
       type: [Number, String],
       required: false,
-      default: 450
+      default: 250
     },
     minHeight: {
       type: [Number, String],
       required: false,
-      default: 450
+      default: 250
     },
     fontSize: {
       type: [Number, String],
@@ -56,8 +64,7 @@ export default {
       content: '',
       showInfo: {
         defaultOpen: null,
-        toolbarsFlag: true,
-        subfield: true
+        toolbarsFlag: true
       },
       toolbars: {
         bold: true, // 粗体
@@ -101,8 +108,7 @@ export default {
     if (!this.editable) {
       this.showInfo = {
         defaultOpen: 'preview',
-        toolbarsFlag: false,
-        subfield: false
+        toolbarsFlag: false
       }
     }
   },
diff --git a/front/src/views/doc/DocView/index.vue b/front/src/views/doc/DocView/index.vue
index e98b937c..ca6f641d 100644
--- a/front/src/views/doc/DocView/index.vue
+++ b/front/src/views/doc/DocView/index.vue
@@ -50,9 +50,9 @@
       <http-method :method="docInfo.httpMethod" /> {{ docInfo.url }}
     </span>
     <h4 v-if="docInfo.description" class="doc-descr">
-      <div>{{ $ts('description') }}</div>
-      <span class="content" v-html="docInfo.description.replace(/\n/g,'<br />')"></span>
+      {{ $ts('description') }}
     </h4>
+    <rich-text-editor :value="docInfo.description" :editable="false" />
     <h4 v-if="docInfo.contentType">ContentType<span class="content">{{ docInfo.contentType }}</span></h4>
     <div v-if="docInfo.pathParams.length > 0">
       <h4>{{ $ts('pathVariable') }}</h4>
@@ -147,10 +147,11 @@ import ParameterTable from '@/components/ParameterTable'
 import HttpMethod from '@/components/HttpMethod'
 import ExportUtil from '@/utils/export'
 import { get_effective_url, parse_root_array } from '@/utils/common'
+import RichTextEditor from '@/components/RichTextEditor'
 
 export default {
   name: 'DocView',
-  components: { ParameterTable, HttpMethod },
+  components: { ParameterTable, HttpMethod, RichTextEditor },
   props: {
     docId: {
       type: String,
diff --git a/front/src/views/doc/edit/index.vue b/front/src/views/doc/edit/index.vue
index 4254c528..76173a0f 100644
--- a/front/src/views/doc/edit/index.vue
+++ b/front/src/views/doc/edit/index.vue
@@ -17,7 +17,7 @@
             <el-input v-model="docInfo.name" maxlength="100" show-word-limit />
           </el-form-item>
           <el-form-item prop="description" :label="$ts('docDesc')">
-            <custom-editor :value="docInfo.description" :editable="true" @input="editorInput" />
+            <rich-text-editor :value="docInfo.description" :editable="true" @input="editorInput" />
           </el-form-item>
           <el-form-item prop="url" :label="$ts('requestUrl')">
             <el-input v-model="docInfo.url" class="input-with-select" maxlength="100" show-word-limit @input="onUrlInput">
@@ -178,8 +178,9 @@
         />
       </el-tab-pane>
     </el-tabs>
-    <div style="margin: 20px;">
-      <el-input v-model="remark" size="mini" :placeholder="$ts('currentUpdateRemark')" show-word-limit maxlength="100" />
+    <div style="margin: 20px; max-width: 45%">
+      <h3>{{ $ts('remark') }}： </h3>
+      <rich-text-editor :value="remark" :placeholder="$ts('currentUpdateRemark')" :editable="true" @input="remarkEditorInput" />
     </div>
     <div style="margin-top: 10px;">
       <el-button type="text" icon="el-icon-back" @click="goBack">{{ $ts('back') }}</el-button>
@@ -239,10 +240,10 @@ import DocView from '../DocView'
 import EditTable from '../EditTable'
 import RootArrayTable from '../RootArrayTable'
 import {init_docInfo_complete_view} from "@/utils/common";
-import CustomEditor from '@/components/CustomEditor'
+import RichTextEditor from '@/components/RichTextEditor'
 
 export default {
-  components: { CustomEditor, DocView, EditTable, RootArrayTable },
+  components: { RichTextEditor, DocView, EditTable, RootArrayTable },
   data() {
     return {
       params: {},
@@ -692,6 +693,9 @@ name3:value3`,
     },
     editorInput(content) {
       this.docInfo.description = content
+    },
+    remarkEditorInput(content) {
+      this.remark = content
     }
   }
 }
-- 
Gitee