Просмотр исходного кода

富文本编辑器保持undo & redo 可用

Michael Wang 4 лет назад
Родитель
Сommit
1e03e847ad

+ 3 - 2
src/components/VEditor/VEditor.vue

@@ -49,8 +49,9 @@ export default {
     emitJSON() {
       if (this.$refs.editor.contentEditable) {
         const json = toJSON(this.$refs.editor);
-        this.$emit("input", json);
-        this.$emit("change", json);
+        // this.$emit("input", json);
+        // this.$emit("change", json);
+        this.$emit("result", json);
       }
     },
   },

+ 12 - 6
src/components/VEditor/components/VMenu.vue

@@ -1,27 +1,33 @@
 <template>
   <div class="edit-menus" style="display: flex; gap: 10px;">
     <!-- 由于v-model会re-render,这里无法redo了 -->
-    <!-- <img
+    <img
       class="intLink"
-      title="Undo"
+      title="撤销"
       @click="execCommand('undo')"
       src="data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs="
-    /> -->
+    />
+    <img
+      class="intLink"
+      title="取消撤销"
+      onclick="execCommand('redo');"
+      src="data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw=="
+    />
     <img
       class="intLink"
-      title="Bold"
+      title="加粗"
       @click="execCommand('bold')"
       src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs="
     />
     <img
       class="intLink"
-      title="Italic"
+      title="斜体"
       @click="execCommand('italic')"
       src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw=="
     />
     <img
       class="intLink"
-      title="Underline"
+      title="下划线"
       @click="execCommand('underline')"
       src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7"
     />

+ 13 - 3
src/features/examwork/ExamManagement/ExamEdit.vue

@@ -314,7 +314,7 @@
                 <el-checkbox label="CLIENT_CAMERA"
                   >电脑摄像头为主机位</el-checkbox
                 >
-                <el-checkbox label="CLIENT_SCREEN">电脑开启录</el-checkbox>
+                <el-checkbox label="CLIENT_SCREEN">电脑开启录</el-checkbox>
                 <el-checkbox label="MOBILE_FIRST">手机主机位</el-checkbox>
                 <el-checkbox
                   :disabled="!form.monitorVideoSource.includes('MOBILE_FIRST')"
@@ -332,7 +332,11 @@
         <el-form :model="form" label-width="170px" inline>
           <el-row>
             <el-form-item label="考试须知">
-              <VEditor v-model="form.preNotice" style="width: 300px;" />
+              <VEditor
+                :value="form.preNoticeClone"
+                style="width: 300px;"
+                @result="(v) => (form.preNotice = v)"
+              />
             </el-form-item>
           </el-row>
           <el-row>
@@ -344,7 +348,11 @@
           </el-row>
           <el-row>
             <el-form-item label="考后说明">
-              <VEditor v-model="form.postNotice" style="width: 300px;" />
+              <VEditor
+                :value="form.postNoticeClone"
+                style="width: 300px;"
+                @result="(v) => (form.postNotice = v)"
+              />
             </el-form-item>
           </el-row>
           <el-row>
@@ -465,6 +473,8 @@ export default {
       }
       this.form.startEndTimeProxy = [this.form.startTime, this.form.endTime];
       this.form.monitorProxy = !!this.form.monitorVideoSource;
+      this.form.preNoticeClone = this.form.preNotice;
+      this.form.postNoticeClone = this.form.postNotice;
     }
   },
   data() {