diff --git a/frontend/src/business/components/track/case/components/TestCaseComment.vue b/frontend/src/business/components/track/case/components/TestCaseComment.vue
index 4f53742483..da831f8cad 100644
--- a/frontend/src/business/components/track/case/components/TestCaseComment.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseComment.vue
@@ -2,20 +2,14 @@
   <el-dialog :visible.sync="dialogTableVisible">
 
     <div v-loading="result.loading">
-
+      <div class="editors_div_style">
+        <div id="editorsDiv">
+          <mavon-editor :disabled="isReadOnly"
+                        @imgAdd="imgAdd" :default-open="'edit'" class="review-mavon-editor" :imageFilter="imageFilter"
+                        :toolbars="richDataToolbars" @imgDel="imgDel" v-model="textarea" ref="md"/>
+        </div>
+      </div>
       <div>
-        <el-input
-          type="textarea"
-          :placeholder="$t('test_track.comment.send_comment')"
-          v-model="textarea"
-          maxlength="60"
-          show-word-limit
-          resize="none"
-          :autosize="{ minRows: 4, maxRows: 4}"
-          @keyup.ctrl.enter.native="sendComment"
-          :disabled="isReadOnly"
-        >
-        </el-input>
         <el-button type="primary" size="mini" class="send-btn" @click="sendComment" :disabled="isReadOnly">
           {{ $t('test_track.comment.send') }}
         </el-button>
@@ -41,15 +35,50 @@ export default {
       result: {},
       textarea: '',
       isReadOnly: false,
-      dialogTableVisible: false
-    }
+      dialogTableVisible: false,
+      richDataToolbars: {
+        bold: false, // 粗体
+        italic: false, // 斜体
+        header: false, // 标题
+        underline: false, // 下划线
+        strikethrough: false, // 中划线
+        mark: false, // 标记
+        superscript: false, // 上角标
+        subscript: false, // 下角标
+        quote: false, // 引用
+        ol: false, // 有序列表
+        ul: false, // 无序列表
+        link: false, // 链接
+        imagelink: true, // 图片链接
+        code: false, // code
+        table: false, // 表格
+        fullscreen: false, // 全屏编辑
+        readmodel: false, // 沉浸式阅读
+        htmlcode: false, // 展示html源码
+        help: false, // 帮助
+        /* 1.3.5 */
+        undo: false, // 上一步
+        redo: false, // 下一步
+        trash: false, // 清空
+        save: false, // 保存（触发events中的save事件）
+        /* 1.4.2 */
+        navigation: false, // 导航目录
+        /* 2.1.8 */
+        alignleft: false, // 左对齐
+        aligncenter: false, // 居中
+        alignright: false, // 右对齐
+        /* 2.2.1 */
+        subfield: false, // 单双栏模式
+        preview: false, // 预览
+      }
+    };
   },
   created() {
 
   },
   methods: {
     open() {
-      this.dialogTableVisible = true
+      this.dialogTableVisible = true;
     },
     sendComment() {
       let comment = {};
@@ -63,14 +92,52 @@ export default {
         this.$success(this.$t('test_track.comment.send_success'));
         this.refresh(comment.caseId);
         this.textarea = '';
-        this.dialogTableVisible = false
+        this.dialogTableVisible = false;
       });
     },
     refresh(id) {
       this.$emit('getComments');
     },
+    //富文本框
+    imgAdd(pos, file) {
+      let param = {
+        id: getUUID().substring(0, 8)
+      };
+
+      file.prefix = param.id;
+      this.result = this.$fileUpload('/resource/md/upload', file, null, param, () => {
+        this.$success(this.$t('commons.save_success'));
+        this.$refs.md.$img2Url(pos, '/resource/md/get/'  + param.id+"_"+file.name);
+        this.sendComment();
+      });
+      this.$emit('imgAdd', file);
+    },
+    imageFilter(file){
+      let isImg = false;
+      if(file){
+        if(file.name){
+          if (file.name.indexOf("[")> 0 || file.name.indexOf("]") > 0||file.name.indexOf("([)")> 0 || file.name.indexOf(")") > 0){
+            this.$error("图片名称不能含有特殊字符");
+            isImg = false;
+          }else {
+            isImg = true;
+          }
+        }
+      }
+      return isImg;
+    },
+    imgDel(file) {
+      let fileUrl = file[1].prefix + "_" + file[1].name;
+      let comments = this.$refs.reviewComments;
+      comments.forEach(item => {
+        let imgCheckResult = item.checkByUrls(fileUrl);
+        if(imgCheckResult){
+          item.deleteComment();
+        }
+      });
+    },
   }
-}
+};
 </script>
 
 <style scoped>
@@ -83,4 +150,15 @@ export default {
   overflow-y: scroll;
   height: calc(100vh - 250px);
 }
+
+.editors_div_style {
+  height: 300px;
+  overflow: auto
+}
+
+.review-mavon-editor {
+  min-height: 20px;
+  height: 300px;
+  overflow: auto
+}
 </style>