diff --git a/front/package.json b/front/package.json
index 28539f365d1c1c53b591bfc222bbe989cc518c36..cde39e9b96ff3fbf95bc2abe4660971a5ef4b97b 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/RichTextEditor/index.vue b/front/src/components/RichTextEditor/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b3f19eb83df1d3c66994bc492160ffb980f534dd
--- /dev/null
+++ b/front/src/components/RichTextEditor/index.vue
@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <mavon-editor
+      ref="md"
+      v-model="content"
+      :ishljs="true"
+      :editable="editable"
+      :placeholder="placeholder"
+      :box-shadow="false"
+      :subfield="false"
+      :tab-size="2"
+      :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: 'RichTextEditor',
+  components: {
+    mavonEditor
+  },
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    placeholder: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    height: {
+      type: [Number, String],
+      required: false,
+      default: 250
+    },
+    minHeight: {
+      type: [Number, String],
+      required: false,
+      default: 250
+    },
+    fontSize: {
+      type: [Number, String],
+      required: false,
+      default: 13
+    }
+  },
+  data() {
+    return {
+      content: '',
+      showInfo: {
+        defaultOpen: null,
+        toolbarsFlag: 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
+      }
+    }
+  },
+  mounted() {
+  },
+  methods: {}
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/front/src/views/doc/DocView/index.vue b/front/src/views/doc/DocView/index.vue
index e98b937c9c346b74120b72ce863d4ec860d8e0c0..ca6f641d1fbb1fc1b9fcaa3db97d1a80841a8c85 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 848e223a5477710dd26d18d39db9871ec51d3375..76173a0fc506ed9f6325f70d07def3a30f945cec 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 />
+            <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,9 +240,10 @@ import DocView from '../DocView'
 import EditTable from '../EditTable'
 import RootArrayTable from '../RootArrayTable'
 import {init_docInfo_complete_view} from "@/utils/common";
+import RichTextEditor from '@/components/RichTextEditor'
 
 export default {
-  components: { DocView, EditTable, RootArrayTable },
+  components: { RichTextEditor, DocView, EditTable, RootArrayTable },
   data() {
     return {
       params: {},
@@ -688,6 +690,12 @@ name3:value3`,
         '2': 'json'
       }
       return map[this.importParamTemplateModel + ''] || ''
+    },
+    editorInput(content) {
+      this.docInfo.description = content
+    },
+    remarkEditorInput(content) {
+      this.remark = content
     }
   }
 }