....

src/components/ckeditor.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="ckeditor">
+    <textarea
+      :id="id"
+      :display="display"
+      :value="value"
+      class="el-textarea__inner"
+    ></textarea>
+  </div>
+</template>
+
+<script>
+let inc = 0;
+export default {
+  props: {
+    display: {
+      type: String,
+      default: "inline"
+    },
+    value: {
+      type: String
+    },
+    id: {
+      type: String,
+      default: () => `editor-${++inc}`
+    },
+    height: {
+      type: String,
+      default: "300px"
+    },
+    width: {
+      type: String,
+      default: "500px"
+    },
+    language: {
+      type: String,
+      default: "zh-cn"
+    },
+    extraplugins: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    instance() {
+      return window.CKEDITOR.instances[this.id];
+    }
+  },
+  beforeUpdate() {
+    if (this.value !== this.instance.getData()) {
+      this.instance.setData(this.value);
+    }
+  },
+  mounted() {
+    let config = {
+      language: this.language,
+      height: this.height,
+      width: this.width,
+      extraPlugins: this.extraplugins,
+      toolbarGroups: [
+        { name: "clipboard", groups: ["clipboard", "undo"] },
+        {
+          name: "editing",
+          groups: ["find", "selection", "spellchecker", "editing"]
+        },
+        { name: "links", groups: ["links"] },
+        { name: "insert", groups: ["insert"] },
+        { name: "forms", groups: ["forms"] },
+        { name: "tools", groups: ["tools"] },
+        { name: "document", groups: ["mode", "document", "doctools"] },
+        { name: "others", groups: ["others"] },
+        "/",
+        { name: "basicstyles", groups: ["basicstyles", "cleanup"] },
+        {
+          name: "paragraph",
+          groups: ["list", "indent", "blocks", "align", "bidi", "paragraph"]
+        },
+        { name: "styles", groups: ["styles"] },
+        { name: "colors", groups: ["colors"] },
+        { name: "about", groups: ["about"] }
+      ],
+      removeButtons:
+        "Underline,Subscript,Superscript,Image,HorizontalRule,Unlink,Link,Scayt,Cut,Copy,Paste,PasteText,PasteFromWord,Maximize,Italic,Bold,NumberedList,BulletedList,Indent,Outdent,Blockquote,Styles,Format,About,RemoveFormat,Strike"
+    };
+    if (this.display !== "inline") {
+      window.CKEDITOR.replace(this.id, config);
+    } else {
+      window.CKEDITOR.inline(this.id, config);
+    }
+    this.instance.on("change", () => {
+      let html = this.instance.getData();
+      if (html !== this.value) {
+        this.$emit("input", html);
+      }
+    });
+  },
+  beforeDestroy() {
+    if (this.instance) {
+      this.instance.focusManager.blur(true);
+      this.instance.destroy();
+    }
+  }
+};
+</script>
+<style>
+.ckeditor::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+</style>

src/modules/examwork/view/onlineExam.vue

@@ -136,10 +136,10 @@
               <el-tab-pane label="显示设置" name="tab3">
                 <el-row>
                   <el-form-item label="考前说明" label-width="110px">
-                    <el-input
+                    <ckeditor
+                      width="1000px"
                       v-model="form.properties.BEFORE_EXAM_REMARK"
-                      auto-complete="off"
-                    ></el-input>
+                    ></ckeditor>
                   </el-form-item>
                 </el-row>
                 <el-row>
@@ -341,6 +341,7 @@
 <script>
 import { EXAM_TYPE, EXAM_WORK_API } from "@/constants/constants.js";
 import moment from "moment";
+import ckeditor from "@/components/ckeditor.vue";
 
 let _this = null;
 
@@ -467,6 +468,9 @@ let validateLivingWarnThreshold = (rule, value, callback) => {
 };
 
 export default {
+  components: {
+    ckeditor
+  },
   data() {
     return {
       activeName: "tab1",