3 سال پیش · 794f0c5097
--- a/public/img/editor/answer_point_x.png
+++ b/public/img/editor/answer_point_x.png
--- a/public/img/editor/menu_audio.png
+++ b/public/img/editor/menu_audio.png
--- a/public/img/editor/menu_bold.png
+++ b/public/img/editor/menu_bold.png
--- a/public/img/editor/menu_formula.png
+++ b/public/img/editor/menu_formula.png
--- a/public/img/editor/menu_image.png
+++ b/public/img/editor/menu_image.png
--- a/public/img/editor/menu_italic.png
+++ b/public/img/editor/menu_italic.png
--- a/public/img/editor/menu_subscript.png
+++ b/public/img/editor/menu_subscript.png
--- a/public/img/editor/menu_superscript.png
+++ b/public/img/editor/menu_superscript.png
--- a/public/img/editor/menu_underline.png
+++ b/public/img/editor/menu_underline.png
--- a/public/img/editor/text_audio.png
+++ b/public/img/editor/text_audio.png
--- a/public/index.html
+++ b/public/index.html
@@ -1,39 +1,40 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-  <head>
			
 
				-    <meta charset="utf-8" />
			
 
				-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
			
 
				-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
			
 
				-    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
			
 
				-    <title>题库</title>
			
 
				-    <script>
			
 
				-      var _hmt = _hmt || [];
			
 
				-
			
 
				-      if (navigator.appVersion.includes("Chrome/")) {
			
 
				-        try {
			
 
				-          _hmt.push([
			
 
				-            "_setUserTag",
			
 
				-            "4873",
			
 
				-            navigator.appVersion.match(/(Chrome\/\d\d)/)[0],
			
 
				-          ]);
			
 
				-        } catch (e) {
			
 
				-          _hmt.push(["_setUserTag", "4873", navigator.appVersion]);
			
 
				-        }
			
 
				-      }
			
 
				-
			
 
				-      _hmt.push(["_setUserTag", "4889", navigator.appVersion]);
			
 
				-      _hmt.push(["_setUserTag", "4894", navigator.userAgent]);
			
 
				-    </script>
			
 
				-    <script src="<%= BASE_URL %>ckeditor/ckeditor.js"></script>
			
 
				-  </head>
			
 
				-  <body>
			
 
				-    <noscript>
			
 
				-      <strong
			
 
				-        >We're sorry but vue-starter doesn't work properly without JavaScript
			
 
				-        enabled. Please enable it to continue.</strong
			
 
				-      >
			
 
				-    </noscript>
			
 
				-    <div id="app"></div>
			
 
				-    <!-- built files will be auto injected -->
			
 
				-  </body>
			
 
				-</html>
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+  <meta charset="utf-8" />

			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />

			
 
				+  <meta name="viewport" content="width=device-width,initial-scale=1.0" />

			
 
				+  <link rel="icon" href="<%= BASE_URL %>favicon.ico" />

			
 
				+  <title>题库</title>

			
 
				+  <script>

			
 
				+    var _hmt = _hmt || [];

			
 
				+

			
 
				+    if (navigator.appVersion.includes("Chrome/")) {

			
 
				+      try {

			
 
				+        _hmt.push([

			
 
				+          "_setUserTag",

			
 
				+          "4873",

			
 
				+          navigator.appVersion.match(/(Chrome\/\d\d)/)[0],

			
 
				+        ]);

			
 
				+      } catch (e) {

			
 
				+        _hmt.push(["_setUserTag", "4873", navigator.appVersion]);

			
 
				+      }

			
 
				+    }

			
 
				+

			
 
				+    _hmt.push(["_setUserTag", "4889", navigator.appVersion]);

			
 
				+    _hmt.push(["_setUserTag", "4894", navigator.userAgent]);

			
 
				+  </script>

			
 
				+  <!-- <script src="<%= BASE_URL %>ckeditor/ckeditor.js"></script> -->

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+  <noscript>

			
 
				+    <strong>We're sorry but vue-starter doesn't work properly without JavaScript

			
 
				+      enabled. Please enable it to continue.</strong>

			
 
				+  </noscript>

			
 
				+  <div id="app"></div>

			
 
				+  <!-- built files will be auto injected -->

			
 
				+</body>

			
 
				+

			
 
				+</html>

			
--- a/src/components/RichText.vue
+++ b/src/components/RichText.vue
@@ -0,0 +1,31 @@
 
				+<template>
			
 
				+  <div class="rich-text"></div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import { renderRichText } from "./vEditor/renderJSON";
			
 
				+
			
 
				+export default {
			
 
				+  name: "RichText",
			
 
				+  props: {
			
 
				+    textJson: {
			
 
				+      type: Object,
			
 
				+      default() {
			
 
				+        return {};
			
 
				+      },
			
 
				+    },
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {};
			
 
				+  },
			
 
				+  watch: {
			
 
				+    textJson(val) {
			
 
				+      renderRichText(val, this.$el);
			
 
				+    },
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    renderRichText(this.textJson, this.$el);
			
 
				+  },
			
 
				+  methods: {},
			
 
				+};
			
 
				+</script>
			
--- a/src/components/vEditor/VEditor.vue
+++ b/src/components/vEditor/VEditor.vue
@@ -0,0 +1,257 @@
 
				+<template>
			
 
				+  <div class="v-editor">
			
 
				+    <VMenu class="v-editor-head" @audio-added="emitJSON" />
			
 
				+    <div
			
 
				+      :id="'ved' + _uid"
			
 
				+      ref="editor"
			
 
				+      class="v-editor-body"
			
 
				+      :data-placeholder="placeholder"
			
 
				+      contenteditable
			
 
				+      :style="styles"
			
 
				+      @input="emitJSON"
			
 
				+    ></div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import VMenu from "./components/VMenu.vue";
			
 
				+import { renderRichText } from "./renderJSON";
			
 
				+import { toJSON } from "./toJSON";
			
 
				+import {
			
 
				+  IMAGE_EXCEED_SIZE_AS_ATTACHMENT,
			
 
				+  JSON_EXCEED_SIZE_AS_ATTACHMENT,
			
 
				+  MAX_AUDIO_SIZE,
			
 
				+  MAX_IMAGE_SIZE,
			
 
				+  MAX_JSON_SIZE,
			
 
				+} from "./constants";
			
 
				+import { pasteHandle } from "./clipboard";
			
 
				+import { answerPointDragHandle } from "./components/answerPoint";
			
 
				+import timeMixin from "@/mixins/timeMixin";
			
 
				+
			
 
				+export default {
			
 
				+  name: "VEditor",
			
 
				+  components: {
			
 
				+    VMenu,
			
 
				+  },
			
 
				+  mixins: [timeMixin],
			
 
				+  props: {
			
 
				+    placeholder: { type: String, default: "请输入..." },
			
 
				+    value: {
			
 
				+      type: String,
			
 
				+      // 要么为null，要么一定要遵循结构 body.sections[]
			
 
				+      // const EMPTY_RICH_TEXT
			
 
				+      default: () => JSON.stringify({ sections: [] }),
			
 
				+    },
			
 
				+    styles: { type: String, default: "" },
			
 
				+    folder: { type: String, default: "" },
			
 
				+    enableAnswerPoint: { type: Boolean, default: false },
			
 
				+    maxAudioSize: { type: Number, default: MAX_AUDIO_SIZE, required: false },
			
 
				+    maxImageSize: { type: Number, default: MAX_IMAGE_SIZE, required: false },
			
 
				+    imageExceedSizeAsAttachment: {
			
 
				+      type: Number,
			
 
				+      default: IMAGE_EXCEED_SIZE_AS_ATTACHMENT,
			
 
				+      required: false,
			
 
				+    },
			
 
				+    jsonExceedSizeAsAttachment: {
			
 
				+      type: Number,
			
 
				+      default: JSON_EXCEED_SIZE_AS_ATTACHMENT,
			
 
				+      required: false,
			
 
				+    },
			
 
				+    maxJsonSize: { type: Number, default: MAX_JSON_SIZE, required: false },
			
 
				+    emitType: {
			
 
				+      type: String,
			
 
				+      default: "json",
			
 
				+    },
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {};
			
 
				+  },
			
 
				+  watch: {
			
 
				+    value(val, oldVal) {
			
 
				+      if (val !== oldVal) {
			
 
				+        if (this.$refs.editor !== document.activeElement) {
			
 
				+          this.initData();
			
 
				+        }
			
 
				+      }
			
 
				+    },
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    this.initData();
			
 
				+    this.$refs.editor.addEventListener("paste", pasteHandle.bind(this));
			
 
				+    this.$refs.editor.addEventListener(
			
 
				+      "input",
			
 
				+      answerPointDragHandle.bind(this)
			
 
				+    );
			
 
				+    this.$refs.editor.addEventListener("wheel", this.wheelEventHandle);
			
 
				+  },
			
 
				+  beforeDestroy() {
			
 
				+    this.clearSetTs();
			
 
				+  },
			
 
				+  methods: {
			
 
				+    initData() {
			
 
				+      if (this.emitType === "html") {
			
 
				+        this.$refs.editor.innerHTML = this.value;
			
 
				+      } else {
			
 
				+        let content = { sections: [] };
			
 
				+        try {
			
 
				+          content = JSON.parse(this.value);
			
 
				+          renderRichText(content, this.$refs.editor, false);
			
 
				+        } catch (e) {
			
 
				+          this.$refs.editor.innerHTML = this.value;
			
 
				+          this.emitJSON();
			
 
				+        }
			
 
				+      }
			
 
				+    },
			
 
				+    emitJSON() {
			
 
				+      if (!this.$refs.editor.contentEditable) {
			
 
				+        // 不是出于contentEditable则不更新
			
 
				+        return;
			
 
				+      }
			
 
				+
			
 
				+      if (this.emitType === "html") {
			
 
				+        const content = this.$refs.editor.innerHTML;
			
 
				+        this.$emit("input", content);
			
 
				+        this.$emit("change", content);
			
 
				+        return;
			
 
				+      }
			
 
				+
			
 
				+      this.clearSetTs();
			
 
				+      // 延迟触发input任务，避免频繁触发，同时也等待图片渲染，方便获取图片显示尺寸
			
 
				+      this.addSetTime(() => {
			
 
				+        console.log("input:" + Math.random());
			
 
				+        this.inputDelaying = false;
			
 
				+        const json = toJSON(this.$refs.editor);
			
 
				+        // console.log("emit", json, this.$refs.editor);
			
 
				+        // 未来校验多了的话，考虑移除去
			
 
				+        if (json.length > this.maxJsonSize) {
			
 
				+          this.$message.error(
			
 
				+            `富文本长度超过限制，最长可以为 ${
			
 
				+              this.maxJsonSize / 1024 / 1024
			
 
				+            } MB.`
			
 
				+          );
			
 
				+          return;
			
 
				+        }
			
 
				+        // console.log(json, this.value, json === this.value);
			
 
				+        this.$emit("input", json);
			
 
				+        this.$emit("change", json);
			
 
				+        // this.$emit("on-result", json);
			
 
				+        // console.log(json);
			
 
				+      }, 200);
			
 
				+
			
 
				+      // re-render 之后 restore cursor? 不现实，因为dom结构变了。
			
 
				+    },
			
 
				+    wheelEventHandle(e) {
			
 
				+      // console.log(e);
			
 
				+      // console.dir(e.target);
			
 
				+      const el = e.target;
			
 
				+      if (el.tagName && el.tagName === "IMG") {
			
 
				+        e.preventDefault();
			
 
				+        e.stopPropagation();
			
 
				+        const shift = e.deltaY > 0;
			
 
				+        const newWidth =
			
 
				+          +getComputedStyle(el).width.replace("px", "") + (shift ? 1 : -1);
			
 
				+        // console.log(newWidth, el.naturalWidth);
			
 
				+        if (newWidth >= 16 && newWidth <= el.naturalWidth) {
			
 
				+          el.style.width = newWidth + "px";
			
 
				+          el.style.height =
			
 
				+            (newWidth / el.naturalWidth) * el.naturalHeight + "px";
			
 
				+          // el.setAttribute("width", newWidth);
			
 
				+
			
 
				+          this.emitJSON();
			
 
				+        }
			
 
				+      }
			
 
				+    },
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style>
			
 
				+.v-editor {
			
 
				+  position: relative;
			
 
				+  line-height: 20px;
			
 
				+}
			
 
				+.v-editor-head {
			
 
				+  position: absolute;
			
 
				+  left: 2px;
			
 
				+  right: 2px;
			
 
				+  background-color: #fff;
			
 
				+  top: 2px;
			
 
				+  z-index: 9;
			
 
				+  border-bottom: 1px solid #f0f0f0;
			
 
				+}
			
 
				+
			
 
				+.v-editor-body,
			
 
				+.sourceView {
			
 
				+  border: 1px solid #e4e7ed;
			
 
				+  border-radius: 5px;
			
 
				+  min-height: 100px;
			
 
				+  max-height: 300px;
			
 
				+  padding: 8px;
			
 
				+  padding-top: 32px;
			
 
				+  overflow: scroll;
			
 
				+  outline: none;
			
 
				+  white-space: pre;
			
 
				+}
			
 
				+
			
 
				+.sourceView {
			
 
				+  margin: -5px;
			
 
				+}
			
 
				+
			
 
				+.v-editor-body[contenteditable="true"]:empty:not(:focus)::before {
			
 
				+  content: attr(data-placeholder);
			
 
				+  color: grey;
			
 
				+}
			
 
				+.v-editor-body:focus {
			
 
				+  border-color: #1886fe;
			
 
				+}
			
 
				+
			
 
				+.v-editor-body div {
			
 
				+  min-height: 18px;
			
 
				+  line-height: 20px;
			
 
				+}
			
 
				+
			
 
				+.v-editor-body img {
			
 
				+  max-width: 100%;
			
 
				+}
			
 
				+.v-editor-body img[data-is-answer-point] {
			
 
				+  max-height: 16px;
			
 
				+  display: inline-block;
			
 
				+  vertical-align: text-top;
			
 
				+}
			
 
				+
			
 
				+.v-editor-body img.audio {
			
 
				+  height: 16px;
			
 
				+  padding: 0 2px;
			
 
				+  display: inline-block;
			
 
				+  margin-bottom: 4px;
			
 
				+}
			
 
				+.v-editor-body img[data-is-image] {
			
 
				+  /* max-height: 42px; */
			
 
				+  display: inline-block;
			
 
				+}
			
 
				+
			
 
				+.v-editor-body audio {
			
 
				+  height: 16px;
			
 
				+  width: 180px;
			
 
				+  display: inline-block;
			
 
				+  margin-bottom: -4px;
			
 
				+}
			
 
				+
			
 
				+.v-editor-body ::-webkit-media-controls-mute-button {
			
 
				+  display: none !important;
			
 
				+}
			
 
				+
			
 
				+.v-editor-body ::-webkit-media-controls-volume-slider {
			
 
				+  display: none !important;
			
 
				+}
			
 
				+
			
 
				+.v-editor-body b {
			
 
				+  font-weight: bold;
			
 
				+}
			
 
				+.v-editor-body i {
			
 
				+  font-style: italic;
			
 
				+}
			
 
				+.v-editor-body u {
			
 
				+  text-decoration: underline;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/vEditor/clipboard.js
+++ b/src/components/vEditor/clipboard.js
@@ -0,0 +1,281 @@
 
				+import { insertTagToEditor } from "./utils";
			
 
				+// import { randomCode } from "../../utils/utils";
			
 
				+
			
 
				+let _this = null;
			
 
				+
			
 
				+export function dataUrlToBlob(base64Buf) {
			
 
				+  console.log(base64Buf);
			
 
				+  const bufs = base64Buf.split(".");
			
 
				+  const mime = bufs[0].match(/:(.*?);/)[1];
			
 
				+  const bstr = window.atob(bufs[1]);
			
 
				+  const len = bstr.length;
			
 
				+  const u8arr = new Uint8Array(len);
			
 
				+  for (let i = 0; i < len; i++) {
			
 
				+    u8arr[i] = bstr.charCodeAt(i);
			
 
				+  }
			
 
				+  return new Blob([u8arr], { type: mime });
			
 
				+}
			
 
				+
			
 
				+function fileToBase64(file) {
			
 
				+  return new Promise((resolve, reject) => {
			
 
				+    const reader = new FileReader();
			
 
				+    reader.readAsDataURL(file);
			
 
				+    reader.onload = () => resolve(reader.result);
			
 
				+    reader.onerror = (error) => reject(error);
			
 
				+  });
			
 
				+}
			
 
				+
			
 
				+function getDataUrlFromImageUrl(url) {
			
 
				+  const img = new Image();
			
 
				+  img.setAttribute("crossorigin", "anonymous");
			
 
				+  img.src = url;
			
 
				+
			
 
				+  return new Promise((resolve, reject) => {
			
 
				+    const canvas = document.createElement("canvas");
			
 
				+    const ctx = canvas.getContext("2d");
			
 
				+    canvas.width = img.width;
			
 
				+    canvas.height = img.height;
			
 
				+    // console.dir(img);
			
 
				+    img.onload = function () {
			
 
				+      ctx.drawImage(img, 0, 0);
			
 
				+      resolve(canvas.toDataURL("image/png"));
			
 
				+    };
			
 
				+    img.onerror = function (err) {
			
 
				+      reject(err);
			
 
				+    };
			
 
				+  });
			
 
				+}
			
 
				+
			
 
				+function dataItemGetAsString(dataTransferItem) {
			
 
				+  return new Promise((resolve, reject) => {
			
 
				+    try {
			
 
				+      dataTransferItem.getAsString((s) => {
			
 
				+        resolve(s);
			
 
				+      });
			
 
				+    } catch (error) {
			
 
				+      reject(error);
			
 
				+    }
			
 
				+  });
			
 
				+}
			
 
				+
			
 
				+// function checkHtmlIsFromOffice(htmlDom) {
			
 
				+//   const meta = htmlDom.querySelector("meta[name='Originator']");
			
 
				+//   return meta && meta.getAttribute("content").includes("Microsoft Word");
			
 
				+// }
			
 
				+
			
 
				+function checkDomIsBlock(dom) {
			
 
				+  if (dom.nodeType === Node.ELEMENT_NODE) {
			
 
				+    const disPlay = window.getComputedStyle(dom).display;
			
 
				+    if (disPlay) {
			
 
				+      return disPlay === "block";
			
 
				+    } else {
			
 
				+      const blockDomNames = [
			
 
				+        "div",
			
 
				+        "p",
			
 
				+        "h1",
			
 
				+        "h2",
			
 
				+        "h3",
			
 
				+        "h4",
			
 
				+        "h5",
			
 
				+        "h6",
			
 
				+        "ul",
			
 
				+        "ol",
			
 
				+        "table",
			
 
				+        "tr",
			
 
				+      ];
			
 
				+      return blockDomNames.includes(dom.tagName.toLowerCase());
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+function checkDomHasTextContent(content) {
			
 
				+  let cont = content.replace(/\n/g, "");
			
 
				+  return !!cont;
			
 
				+}
			
 
				+
			
 
				+function checkDomIsUnvalid(dom) {
			
 
				+  const unvalidFunc = [
			
 
				+    (node) =>
			
 
				+      node.tagName &&
			
 
				+      ["meta", "link", "script", "style", "title"].includes(
			
 
				+        node.tagName.toLowerCase()
			
 
				+      ),
			
 
				+    (node) => node.nodeType === Node.COMMENT_NODE,
			
 
				+  ];
			
 
				+
			
 
				+  return unvalidFunc.some((unfunc) => unfunc(dom));
			
 
				+}
			
 
				+
			
 
				+function getHtmlValidDom(htmlDom, checkBlock) {
			
 
				+  let doms = [];
			
 
				+  let curBlockDoms = [];
			
 
				+
			
 
				+  const findDom = (nodeList) => {
			
 
				+    nodeList.forEach((node) => {
			
 
				+      if (checkDomIsUnvalid(node)) return;
			
 
				+
			
 
				+      if (checkBlock && checkDomIsBlock(node) && curBlockDoms.length) {
			
 
				+        doms.push(curBlockDoms);
			
 
				+        curBlockDoms = [];
			
 
				+      }
			
 
				+
			
 
				+      if (node.childNodes.length) {
			
 
				+        findDom(node.childNodes);
			
 
				+        return;
			
 
				+      }
			
 
				+
			
 
				+      if (
			
 
				+        (node.tagName && node.tagName.toLowerCase() === "img") ||
			
 
				+        (node.nodeType === Node.TEXT_NODE &&
			
 
				+          checkDomHasTextContent(node.textContent))
			
 
				+      ) {
			
 
				+        curBlockDoms.push(node);
			
 
				+      }
			
 
				+    });
			
 
				+  };
			
 
				+
			
 
				+  findDom(htmlDom.childNodes);
			
 
				+
			
 
				+  if (curBlockDoms.length) {
			
 
				+    doms.push(curBlockDoms);
			
 
				+    curBlockDoms = [];
			
 
				+  }
			
 
				+  console.log(doms);
			
 
				+  return doms;
			
 
				+}
			
 
				+
			
 
				+// function getOfficeHtmlValidDom(htmlDom) {
			
 
				+//   let doms = [];
			
 
				+//   htmlDom.querySelectorAll("p").forEach((pDom) => {
			
 
				+//     const elems = getHtmlValidDom(pDom, false);
			
 
				+//     if (elems.length) doms.push(...elems);
			
 
				+//   });
			
 
				+//   return doms;
			
 
				+// }
			
 
				+
			
 
				+async function pasteHtmlItem(htmlItem) {
			
 
				+  const cont = await dataItemGetAsString(htmlItem).catch((e) => {
			
 
				+    console.log(e);
			
 
				+  });
			
 
				+  if (!cont) return;
			
 
				+
			
 
				+  const divDom = document.createElement("div");
			
 
				+  divDom.innerHTML = cont;
			
 
				+  console.log(divDom);
			
 
				+
			
 
				+  const groups = getHtmlValidDom(divDom, true);
			
 
				+
			
 
				+  for (let i = 0; i < groups.length; i++) {
			
 
				+    for (let j = 0; j < groups[i].length; j++) {
			
 
				+      const element = groups[i][j];
			
 
				+      if (element.tagName && element.tagName.toLowerCase() === "img") {
			
 
				+        await pasteImageDom(element);
			
 
				+      } else {
			
 
				+        document.execCommand("insertText", false, element.textContent);
			
 
				+      }
			
 
				+    }
			
 
				+    document.execCommand("insertParagraph");
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+async function pasteImageDom(imgDom) {
			
 
				+  console.log(imgDom);
			
 
				+  const src = imgDom.getAttribute("src");
			
 
				+  if (!src) return;
			
 
				+  let attributes = {};
			
 
				+  if (imgDom.getAttribute("width"))
			
 
				+    attributes.width = imgDom.getAttribute("width");
			
 
				+  if (imgDom.getAttribute("height"))
			
 
				+    attributes.height = imgDom.getAttribute("height");
			
 
				+
			
 
				+  if (src.includes("base64")) {
			
 
				+    insertTagToEditor(null, "IMG", src, attributes);
			
 
				+  } else if (
			
 
				+    src.includes("http://") ||
			
 
				+    src.includes("https://") ||
			
 
				+    src.includes("file:///")
			
 
				+  ) {
			
 
				+    const dataUrl = await getDataUrlFromImageUrl(src).catch(() => {});
			
 
				+    // console.log(dataUrl);
			
 
				+    if (!dataUrl) return;
			
 
				+    insertTagToEditor(null, "IMG", dataUrl, attributes);
			
 
				+  } else {
			
 
				+    console.log("unknown image url");
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+async function pasteImage(file, attributes) {
			
 
				+  if (file.size > _this.maxImageSize) {
			
 
				+    _this.$message(`单张图片超过限制，最大为 ${_this.maxImageSize / 1024} KB.`);
			
 
				+    return;
			
 
				+  }
			
 
				+
			
 
				+  // 默认转base64;
			
 
				+  const srcBase64 = await fileToBase64(file);
			
 
				+  insertTagToEditor(null, "IMG", srcBase64, attributes);
			
 
				+}
			
 
				+
			
 
				+async function pasteText(textItem) {
			
 
				+  const cont = await dataItemGetAsString(textItem).catch((e) => {
			
 
				+    console.log(e);
			
 
				+  });
			
 
				+  if (!cont) return;
			
 
				+
			
 
				+  document.execCommand("insertText", false, cont);
			
 
				+}
			
 
				+
			
 
				+function filterItem(dataItems, filterFunc) {
			
 
				+  let data = [];
			
 
				+  for (let index = 0; index < dataItems.length; index++) {
			
 
				+    if (filterFunc(dataItems[index])) data.push(dataItems[index]);
			
 
				+  }
			
 
				+  return data;
			
 
				+}
			
 
				+
			
 
				+export async function pasteHandle(event) {
			
 
				+  _this = this;
			
 
				+  // 禁止默认粘贴
			
 
				+  event.preventDefault();
			
 
				+  const clipboard = event.clipboardData;
			
 
				+
			
 
				+  const htmlItems = filterItem(
			
 
				+    clipboard.items,
			
 
				+    (item) => item.kind == "string" && item.type.match("^text/html")
			
 
				+  );
			
 
				+  if (htmlItems.length) {
			
 
				+    console.log("... paste: html ");
			
 
				+    for (let index = 0; index < htmlItems.length; index++) {
			
 
				+      await pasteHtmlItem(htmlItems[index]);
			
 
				+    }
			
 
				+    // _this.$refs.editor.dispatchEvent(new Event("input"));
			
 
				+    return;
			
 
				+  }
			
 
				+
			
 
				+  const fileItems = filterItem(
			
 
				+    clipboard.items,
			
 
				+    (item) => item.kind == "file" && item.type.match("^image/")
			
 
				+  );
			
 
				+  if (fileItems.length) {
			
 
				+    console.log("... paste: file ");
			
 
				+    for (let index = 0; index < fileItems.length; index++) {
			
 
				+      const file = fileItems[index].getAsFile();
			
 
				+      await pasteImage(file);
			
 
				+    }
			
 
				+    // _this.$refs.editor.dispatchEvent(new Event("input"));
			
 
				+    return;
			
 
				+  }
			
 
				+
			
 
				+  for (var i = 0; i < clipboard.items.length; i++) {
			
 
				+    const clipboardItem = clipboard.items[i];
			
 
				+    if (
			
 
				+      clipboardItem.kind == "string" &&
			
 
				+      clipboardItem.type.match("^text/plain")
			
 
				+    ) {
			
 
				+      console.log("... paste: text ");
			
 
				+      await pasteText(clipboardItem);
			
 
				+    } else {
			
 
				+      console.log("... paste: other ");
			
 
				+    }
			
 
				+  }
			
 
				+  // _this.$refs.editor.dispatchEvent(new Event("input"));
			
 
				+}
			
--- a/src/components/vEditor/components/FormulaDialog.vue
+++ b/src/components/vEditor/components/FormulaDialog.vue
@@ -0,0 +1,151 @@
 
				+<template>
			
 
				+  <el-dialog
			
 
				+    class="formula-dialog"
			
 
				+    :visible.sync="modalIsShow"
			
 
				+    title="公式编辑"
			
 
				+    top="10px"
			
 
				+    width="850px"
			
 
				+    :close-on-click-modal="false"
			
 
				+    :close-on-press-escape="false"
			
 
				+    append-to-body
			
 
				+    @opened="initData"
			
 
				+    @closed="closed"
			
 
				+  >
			
 
				+    <div v-if="modalIsShow" class="math-body">
			
 
				+      <iframe
			
 
				+        ref="FormulaFrame"
			
 
				+        :src="iframeSrc"
			
 
				+        frameborder="0"
			
 
				+        width="783"
			
 
				+        height="386"
			
 
				+      ></iframe>
			
 
				+    </div>
			
 
				+    <div slot="footer">
			
 
				+      <el-button type="primary" :disabled="loading" @click="submit"
			
 
				+        >确认</el-button
			
 
				+      >
			
 
				+      <el-button type="danger" plain @click="cancel">取消</el-button>
			
 
				+    </div>
			
 
				+  </el-dialog>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import { saveFormulaImageToEditorHandle } from "./image";
			
 
				+
			
 
				+export default {
			
 
				+  name: "FormulaDialog",
			
 
				+  props: {
			
 
				+    imageHandle: {
			
 
				+      type: Function,
			
 
				+      default() {
			
 
				+        return {};
			
 
				+      },
			
 
				+    },
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      modalIsShow: false,
			
 
				+      iframeSrc: "",
			
 
				+      loading: false,
			
 
				+      // imgRate: 1,
			
 
				+      imgRate: 0.625,
			
 
				+    };
			
 
				+  },
			
 
				+  methods: {
			
 
				+    getFrameUrl() {
			
 
				+      let url = "";
			
 
				+      const formulaPath = "kityformula-plugin/kityFormulaDialog.html";
			
 
				+      const rootUrl = location.href.split("/#/")[0];
			
 
				+      if (rootUrl.indexOf("index.html") !== -1) {
			
 
				+        url = rootUrl.split("index.html")[0] + "/" + formulaPath;
			
 
				+      } else {
			
 
				+        url = `${rootUrl}/${formulaPath}`;
			
 
				+      }
			
 
				+
			
 
				+      return url;
			
 
				+    },
			
 
				+    initData() {
			
 
				+      this.iframeSrc = this.getFrameUrl();
			
 
				+      const childFrameObj = this.$refs.FormulaFrame;
			
 
				+      const editor = this.$parent.$parent.$refs.editor;
			
 
				+      childFrameObj.onload = function () {
			
 
				+        this.contentWindow.editor = editor;
			
 
				+      };
			
 
				+    },
			
 
				+    closed() {
			
 
				+      this.iframeSrc = "";
			
 
				+    },
			
 
				+    cancel() {
			
 
				+      this.modalIsShow = false;
			
 
				+    },
			
 
				+    open() {
			
 
				+      this.modalIsShow = true;
			
 
				+    },
			
 
				+    base64ToBlob(base64Str) {
			
 
				+      var bytes = atob(base64Str.split(",")[1]);
			
 
				+      let arr = new Uint8Array(bytes.length);
			
 
				+      for (let i = 0; i < bytes.length; i++) {
			
 
				+        arr[i] = bytes.charCodeAt(i);
			
 
				+      }
			
 
				+      return new Blob([arr], { type: "image/png" });
			
 
				+    },
			
 
				+    getFormulaResult() {
			
 
				+      return new Promise((resolve, reject) => {
			
 
				+        const childFrameObj = this.$refs.FormulaFrame;
			
 
				+        const kfe = childFrameObj.contentWindow.kfe;
			
 
				+
			
 
				+        try {
			
 
				+          kfe.execCommand("get.image.data", (data) => {
			
 
				+            const latex = kfe.execCommand("get.source");
			
 
				+            if (latex.indexOf("placeholder") > -1) {
			
 
				+              this.modalIsShow = false;
			
 
				+              this.loading = false;
			
 
				+              resolve();
			
 
				+              return;
			
 
				+            }
			
 
				+
			
 
				+            const img = document.createElement("img");
			
 
				+            img.src = data.img;
			
 
				+            img.onload = () => {
			
 
				+              resolve({
			
 
				+                dataUrl: data.img,
			
 
				+                latex,
			
 
				+                param: {
			
 
				+                  width: img.width * this.imgRate,
			
 
				+                  height: img.height * this.imgRate,
			
 
				+                },
			
 
				+              });
			
 
				+            };
			
 
				+          });
			
 
				+        } catch (error) {
			
 
				+          reject(error);
			
 
				+        }
			
 
				+      });
			
 
				+    },
			
 
				+    async submit() {
			
 
				+      if (this.loading) return;
			
 
				+      this.loading = true;
			
 
				+
			
 
				+      const result = await this.getFormulaResult().catch((error) => {
			
 
				+        console.error(error);
			
 
				+        this.loading = false;
			
 
				+      });
			
 
				+
			
 
				+      if (result) {
			
 
				+        let res = true;
			
 
				+        await saveFormulaImageToEditorHandle
			
 
				+          .bind(this.$parent.$parent)(result.dataUrl, {
			
 
				+            "data-latex": result.latex,
			
 
				+            style: `width: ${result.param.width}px;height:${result.param.height}px;`,
			
 
				+          })
			
 
				+          .catch(() => {
			
 
				+            res = false;
			
 
				+          });
			
 
				+        this.loading = false;
			
 
				+        if (!res) return;
			
 
				+      }
			
 
				+      this.cancel();
			
 
				+    },
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
--- a/src/components/vEditor/components/VMenu.vue
+++ b/src/components/vEditor/components/VMenu.vue
@@ -0,0 +1,183 @@
 
				+<template>
			
 
				+  <div class="edit-menus">
			
 
				+    <div class="edit-menu-item">
			
 
				+      <img
			
 
				+        class="intLink"
			
 
				+        title="加粗"
			
 
				+        src="/img/editor/menu_bold.png"
			
 
				+        @mousedown="(event) => execCommand('bold', event)"
			
 
				+      />
			
 
				+    </div>
			
 
				+    <div class="edit-menu-item">
			
 
				+      <img
			
 
				+        class="intLink"
			
 
				+        title="倾斜"
			
 
				+        src="/img/editor/menu_italic.png"
			
 
				+        @mousedown="(event) => execCommand('italic', event)"
			
 
				+      />
			
 
				+    </div>
			
 
				+    <div class="edit-menu-item">
			
 
				+      <img
			
 
				+        class="intLink"
			
 
				+        title="下划线"
			
 
				+        src="/img/editor/menu_underline.png"
			
 
				+        @mousedown="(event) => execCommand('underline', event)"
			
 
				+      />
			
 
				+    </div>
			
 
				+    <div class="edit-menu-item">
			
 
				+      <img
			
 
				+        class="intLink"
			
 
				+        title="上标"
			
 
				+        src="/img/editor/menu_superscript.png"
			
 
				+        @mousedown="(event) => execCommand('superscript', event)"
			
 
				+      />
			
 
				+    </div>
			
 
				+    <div class="edit-menu-item">
			
 
				+      <img
			
 
				+        class="intLink"
			
 
				+        title="下标"
			
 
				+        src="/img/editor/menu_subscript.png"
			
 
				+        @mousedown="(event) => execCommand('subscript', event)"
			
 
				+      />
			
 
				+    </div>
			
 
				+    <div v-if="$parent.enableAnswerPoint" class="edit-menu-item">
			
 
				+      <img
			
 
				+        class="intLink"
			
 
				+        title="答题点"
			
 
				+        src="/img/editor/answer_point_x.png"
			
 
				+        @mousedown="addAnswerPoint"
			
 
				+      />
			
 
				+    </div>
			
 
				+    <div class="edit-menu-item">
			
 
				+      <img
			
 
				+        class="intLink"
			
 
				+        title="插入图片"
			
 
				+        src="/img/editor/menu_image.png"
			
 
				+        @mousedown="$refs.ImageInput.click()"
			
 
				+      />
			
 
				+      <input
			
 
				+        ref="ImageInput"
			
 
				+        type="file"
			
 
				+        accept=".jpg,.jpeg,.png"
			
 
				+        title="插入图片"
			
 
				+        @change="addImage"
			
 
				+      />
			
 
				+    </div>
			
 
				+    <!-- <div class="edit-menu-item">
			
 
				+      <img
			
 
				+        class="intLink"
			
 
				+        title="插入音频"
			
 
				+        src="/img/editor/menu_audio.png"
			
 
				+        @mousedown="$refs.AudioInput.click()"
			
 
				+      />
			
 
				+      <input
			
 
				+        ref="AudioInput"
			
 
				+        type="file"
			
 
				+        accept=".mp3"
			
 
				+        title="插入音频"
			
 
				+        @change="addAudio"
			
 
				+      />
			
 
				+    </div> -->
			
 
				+    <div class="edit-menu-item">
			
 
				+      <img
			
 
				+        class="intLink"
			
 
				+        title="插入公式"
			
 
				+        src="/img/editor/menu_formula.png"
			
 
				+        @mousedown="addFormula"
			
 
				+      />
			
 
				+    </div>
			
 
				+
			
 
				+    <!-- <span class="intLink" title="显示源码" @click="setDocMode('HTML')">
			
 
				+      &lt;/&gt;
			
 
				+    </span>
			
 
				+    <span class="intLink padding-x" title="to JSON" @click="setDocMode('JSON')"
			
 
				+      >{ }</span
			
 
				+    > -->
			
 
				+
			
 
				+    <!-- formula dialog -->
			
 
				+    <formula-dialog ref="FormulaDialog"></formula-dialog>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import { setDocMode } from "./changeMode";
			
 
				+// import { audioHandle } from "./audio";
			
 
				+import { imageHandle } from "./image";
			
 
				+import { answerPointHandle } from "./answerPoint";
			
 
				+import FormulaDialog from "./FormulaDialog";
			
 
				+
			
 
				+export default {
			
 
				+  name: "VMenu",
			
 
				+  components: { FormulaDialog },
			
 
				+  methods: {
			
 
				+    setDocMode(type) {
			
 
				+      setDocMode(type, this.$parent.$refs.editor);
			
 
				+    },
			
 
				+    execCommand(command, event) {
			
 
				+      event.preventDefault();
			
 
				+      document.execCommand(command);
			
 
				+    },
			
 
				+    /**
			
 
				+     * @param {Event} event
			
 
				+     */
			
 
				+    // 暂时不考虑音频上传
			
 
				+    // async addAudio(event) {
			
 
				+    //   // console.log(event, event.target.files[0]);
			
 
				+    //   audioHandle.bind(this.$parent)(event);
			
 
				+    // },
			
 
				+    /**
			
 
				+     * @param {Event} event
			
 
				+     */
			
 
				+    async addImage(event) {
			
 
				+      // console.log(event, event.target.files[0]);
			
 
				+      imageHandle.bind(this.$parent)(event);
			
 
				+    },
			
 
				+    /**
			
 
				+     * @param {Event} event
			
 
				+     */
			
 
				+    async addAnswerPoint(event) {
			
 
				+      event.preventDefault();
			
 
				+      answerPointHandle.bind(this.$parent)(event);
			
 
				+    },
			
 
				+    /**
			
 
				+     * @param {Event} event
			
 
				+     */
			
 
				+    addFormula(event) {
			
 
				+      event.preventDefault();
			
 
				+      this.$refs.FormulaDialog.open();
			
 
				+    },
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style>
			
 
				+.edit-menu-item {
			
 
				+  position: relative;
			
 
				+  display: inline-block;
			
 
				+  vertical-align: middle;
			
 
				+  height: 24px;
			
 
				+  padding: 4px 0;
			
 
				+  margin: 0 4px;
			
 
				+  overflow: hidden;
			
 
				+  cursor: pointer;
			
 
				+}
			
 
				+.edit-menu-item:hover img {
			
 
				+  opacity: 0.6;
			
 
				+}
			
 
				+.edit-menu-item img {
			
 
				+  display: block;
			
 
				+  position: relative;
			
 
				+  height: 100%;
			
 
				+  z-index: 8;
			
 
				+}
			
 
				+.edit-menu-item input {
			
 
				+  position: absolute;
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  top: 30px;
			
 
				+  opacity: 0;
			
 
				+  z-index: 2;
			
 
				+  overflow: hidden;
			
 
				+  visibility: hidden;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/vEditor/components/answerPoint.js
+++ b/src/components/vEditor/components/answerPoint.js
@@ -0,0 +1,74 @@
 
				+import { getAnswerPointImg } from "../utils";
			
 
				+/**
			
 
				+ * 和clipboard.js部分内容相同，注意同步修改
			
 
				+ *
			
 
				+ * @this {Object} VEditor 因为VEditor会带很多选项，所以绑定this传过来
			
 
				+ */
			
 
				+export async function answerPointHandle() {
			
 
				+  this.$refs.editor.focus();
			
 
				+
			
 
				+  // let sel, range;
			
 
				+  // if (window.getSelection) {
			
 
				+  //   sel = window.getSelection();
			
 
				+  // }
			
 
				+
			
 
				+  const node = document.createElement("img");
			
 
				+  node.src = `/img/editor/answer_point_x.png`;
			
 
				+  node.dataset.isAnswerPoint = true;
			
 
				+  node.dataset.order = 0;
			
 
				+
			
 
				+  document.execCommand("insertHTML", false, node.outerHTML);
			
 
				+
			
 
				+  const answerPoints = this.$refs.editor.querySelectorAll(
			
 
				+    "[data-is-answer-point]"
			
 
				+  );
			
 
				+  // console.log(answerPoints);
			
 
				+  const answerPointsChanged = [];
			
 
				+  [...answerPoints].forEach((answerPoint, index) => {
			
 
				+    answerPointsChanged.push(+answerPoint.dataset.order); // 发现是0时，在answer里面增加一个元素
			
 
				+    answerPoint.dataset.order = index + 1;
			
 
				+    answerPoint.src = getAnswerPointImg(index + 1);
			
 
				+  });
			
 
				+  // console.log({ answerPointsChanged });
			
 
				+  this.$emit("emitJSON");
			
 
				+  this.$emit("answer-point-changed", answerPointsChanged);
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * 答题点拖动后更新，通过判断是否有 /img/editor/answer_point_x.png 来判断是否是拖动
			
 
				+ * 因为drag会触发两次input，第一次事件是删除，要忽略第一次事件
			
 
				+ *
			
 
				+ * @param {InputEvent} event
			
 
				+ * @this {Object} VEditor 因为VEditor会带很多选项，所以绑定this传过来
			
 
				+ */
			
 
				+export async function answerPointDragHandle(event) {
			
 
				+  // console.log(event);
			
 
				+  if (!["insertFromDrop", "deleteContentBackward"].includes(event.inputType)) {
			
 
				+    // 只监听drop事件，因为会造成删除
			
 
				+    return;
			
 
				+  }
			
 
				+  const answerPointX = this.$refs.editor.querySelectorAll(
			
 
				+    "img[src='/img/editor/answer_point_x.png']"
			
 
				+  );
			
 
				+  // console.log(answerPointX);
			
 
				+  const answerPoints = this.$refs.editor.querySelectorAll(
			
 
				+    "[data-is-answer-point]"
			
 
				+  );
			
 
				+  // console.log(answerPoints);
			
 
				+  // 没有答题点也会进入这里
			
 
				+  if (answerPoints.length === 0 || answerPointX.length > 0) {
			
 
				+    this.$emit("emitJSON");
			
 
				+    this.$emit("answer-point-changed", []);
			
 
				+    return;
			
 
				+  }
			
 
				+  // console.log("is drag", answerPoints);
			
 
				+  const answerPointsChanged = [];
			
 
				+  [...answerPoints].forEach((answerPoint, index) => {
			
 
				+    answerPointsChanged.push(+answerPoint.dataset.order); // 发现是0时，在answer里面增加一个元素
			
 
				+    answerPoint.dataset.order = index + 1;
			
 
				+    answerPoint.src = getAnswerPointImg(index + 1);
			
 
				+  });
			
 
				+  // console.log({ answerPointsChanged });
			
 
				+  this.$emit("emitJSON");
			
 
				+  this.$emit("answer-point-changed", answerPointsChanged);
			
 
				+}
			
--- a/src/components/vEditor/components/audio.js
+++ b/src/components/vEditor/components/audio.js
@@ -0,0 +1,35 @@
 
				+// import { saveBlobToDisk } from "@/utils/fileUtils";
			
 
				+import { audioToImageNode } from "../utils";
			
 
				+
			
 
				+/**
			
 
				+ * 对粘贴事件进行处理：
			
 
				+ * 1. text类型直接粘贴
			
 
				+ * 2. 文件类型，判断图片
			
 
				+ *
			
 
				+ * @this {Object} VEditor 因为VEditor会带很多选项，所以绑定this传过来
			
 
				+ * @param {Event} event
			
 
				+ */
			
 
				+export async function audioHandle(event) {
			
 
				+  this.$refs.editor.focus();
			
 
				+  /** @type {File} */
			
 
				+  const file = event.target.files[0];
			
 
				+  event.target.value = "";
			
 
				+  if (file.size > this.maxAudioSize) {
			
 
				+    this.$message(
			
 
				+      `音频大小超过限制！最大不超过 ${
			
 
				+        this.$parent.maxAudioSize / 1024 / 1024
			
 
				+      } MB.`
			
 
				+    );
			
 
				+    return;
			
 
				+  }
			
 
				+
			
 
				+  // console.log(this.$parent.folder, this.$parent.$refs.editor);
			
 
				+  // TODO:上传音频文件
			
 
				+  // const relativeFilePath = await saveBlobToDisk(this.folder, file, "mp3");
			
 
				+  const relativeFilePath = "";
			
 
				+  const imageNode = await audioToImageNode(relativeFilePath);
			
 
				+  // console.log({ relativeFilePath, imageNode });
			
 
				+  // console.log(imageNode.outerHTML);
			
 
				+  document.execCommand("insertHTML", false, imageNode.outerHTML);
			
 
				+  this.$emit("audio-added");
			
 
				+}
			
--- a/src/components/vEditor/components/changeMode.js
+++ b/src/components/vEditor/components/changeMode.js
@@ -0,0 +1,66 @@
 
				+const { toJSON } = require("../toJSON");
			
 
				+
			
 
				+let bToSource = false;
			
 
				+let bToJSON = false;
			
 
				+
			
 
				+/**
			
 
				+ *
			
 
				+ * @param {string} type
			
 
				+ * @param {HTMLDivElement} edt
			
 
				+ */
			
 
				+export function setDocMode(type, edt) {
			
 
				+  if (type === "HTML") {
			
 
				+    // if (bToSource === true) return;
			
 
				+    bToJSON = false;
			
 
				+    bToSource = !bToSource;
			
 
				+  }
			
 
				+  if (type === "JSON") {
			
 
				+    if (bToSource === true) return;
			
 
				+    bToSource = false;
			
 
				+    bToJSON = !bToJSON;
			
 
				+  }
			
 
				+
			
 
				+  let oContent;
			
 
				+  if (bToSource) {
			
 
				+    oContent = document.createTextNode(edt.innerHTML);
			
 
				+    edt.innerHTML = "";
			
 
				+    edt.contentEditable = false;
			
 
				+    let oPre = document.createElement("pre");
			
 
				+
			
 
				+    oPre.className = "sourceView";
			
 
				+    oPre.contentEditable = true;
			
 
				+    oPre.style = "overflow: scroll; white-space: normal;";
			
 
				+    oPre.appendChild(oContent);
			
 
				+    edt.appendChild(oPre);
			
 
				+    // 似乎chrome不支持将默认分段改为p
			
 
				+    document.execCommand("defaultParagraphSeparator", false, "div");
			
 
				+  } else if (bToJSON) {
			
 
				+    const je = document.createElement("div");
			
 
				+    je.style =
			
 
				+      "position: absolute; top: 0; left: 0; background: beige; width: 100%; padding: 5px; z-index: 1000000";
			
 
				+
			
 
				+    oContent = document.createTextNode(toJSON(edt));
			
 
				+
			
 
				+    let oPre = document.createElement("pre");
			
 
				+
			
 
				+    // oPre.className = "sourceView";
			
 
				+    edt.contentEditable = false;
			
 
				+    oPre.style = "overflow: scroll;";
			
 
				+    oPre.appendChild(oContent);
			
 
				+    oPre.innerHTML = "双击关闭\n\n\n" + oPre.innerHTML;
			
 
				+    je.appendChild(oPre);
			
 
				+    document.body.appendChild(je);
			
 
				+
			
 
				+    je.addEventListener("dblclick", () => {
			
 
				+      document.body.removeChild(je);
			
 
				+      bToJSON = false;
			
 
				+      edt.contentEditable = true;
			
 
				+    });
			
 
				+  } else {
			
 
				+    oContent = document.createRange();
			
 
				+    oContent.selectNodeContents(edt.firstChild);
			
 
				+    edt.innerHTML = oContent.toString();
			
 
				+    edt.contentEditable = true;
			
 
				+  }
			
 
				+  edt.focus();
			
 
				+}
			
--- a/src/components/vEditor/components/horn.png
+++ b/src/components/vEditor/components/horn.png
--- a/src/components/vEditor/components/image.js
+++ b/src/components/vEditor/components/image.js
@@ -0,0 +1,55 @@
 
				+import { insertTagToEditor } from "../utils";
			
 
				+
			
 
				+function toBase64(file) {
			
 
				+  return new Promise((resolve, reject) => {
			
 
				+    const reader = new FileReader();
			
 
				+    reader.readAsDataURL(file);
			
 
				+    reader.onload = () => resolve(reader.result);
			
 
				+    reader.onerror = (error) => reject(error);
			
 
				+  });
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * 和clipboard.js部分内容相同，注意同步修改
			
 
				+ *
			
 
				+ * @this {Object} VEditor 因为VEditor会带很多选项，所以绑定this传过来
			
 
				+ * @param {Event} event
			
 
				+ */
			
 
				+export async function imageHandle(event) {
			
 
				+  this.$refs.editor.focus();
			
 
				+  /** @type {File} */
			
 
				+  const file = event.target.files[0];
			
 
				+  event.target.value = "";
			
 
				+  if (file.size > this.maxImageSize) {
			
 
				+    this.$message(`单张图片超过限制，最大为 ${this.maxImageSize / 1024} KB.`);
			
 
				+    return;
			
 
				+  }
			
 
				+
			
 
				+  // 图片大于 10KB 或者 富文本总计超过 200KB的话，就以附件保存图片
			
 
				+  // if (
			
 
				+  //   file.size > this.imageExceedSizeAsAttachment ||
			
 
				+  //   this.value.length > this.jsonExceedSizeAsAttachment
			
 
				+  // ) {
			
 
				+  //   // event.preventDefault();
			
 
				+  //   const filePath = await saveBlobToServer(this.folder, file, "png");
			
 
				+  //   insertTagToEditor(
			
 
				+  //     this.$refs.editor,
			
 
				+  //     "IMG",
			
 
				+  //     filePath
			
 
				+  //   );
			
 
				+  // } else {
			
 
				+  const srcBase64 = await toBase64(file);
			
 
				+  insertTagToEditor(this.$refs.editor, "IMG", srcBase64);
			
 
				+  // }
			
 
				+}
			
 
				+
			
 
				+export async function saveFormulaImageToEditorHandle(imgDataUrl, attributes) {
			
 
				+  // if (
			
 
				+  //   file.size > this.imageExceedSizeAsAttachment ||
			
 
				+  //   this.value.length > this.jsonExceedSizeAsAttachment
			
 
				+  // ) {
			
 
				+  //   // event.preventDefault();
			
 
				+  // } else {
			
 
				+  insertTagToEditor(this.$refs.editor, "IMG", imgDataUrl, attributes);
			
 
				+  // }
			
 
				+}
			
--- a/src/components/vEditor/components/upload_icon.png
+++ b/src/components/vEditor/components/upload_icon.png
--- a/src/components/vEditor/constants.js
+++ b/src/components/vEditor/constants.js
@@ -0,0 +1,5 @@
 
				+export const IMAGE_EXCEED_SIZE_AS_ATTACHMENT = 10 * 1024;
			
 
				+export const JSON_EXCEED_SIZE_AS_ATTACHMENT = 200 * 1024;
			
 
				+export const MAX_AUDIO_SIZE = 5 * 1024 * 1024;
			
 
				+export const MAX_IMAGE_SIZE = 200 * 1024;
			
 
				+export const MAX_JSON_SIZE = 2 * 1024 * 1024;
			
--- a/src/components/vEditor/index.d.ts
+++ b/src/components/vEditor/index.d.ts
@@ -0,0 +1,11 @@
 
				+interface RichTextJSON {

			
 
				+  sections: RichTextSectionJSON[];

			
 
				+}

			
 
				+interface RichTextSectionJSON {

			
 
				+  blocks: RichTextBlockJSON[];

			
 
				+}

			
 
				+interface RichTextBlockJSON {

			
 
				+  type: 'text' | 'image' | 'audio' | 'cloze';

			
 
				+  value: string;

			
 
				+  param: object;

			
 
				+}

			
--- a/src/components/vEditor/renderJSON.js
+++ b/src/components/vEditor/renderJSON.js
@@ -0,0 +1,133 @@
 
				+import { getAnswerPointImg } from "./utils";
			
 
				+import { unix } from "moment";
			
 
				+
			
 
				+let _isPreview = true;
			
 
				+// let _container;
			
 
				+/**
			
 
				+ * 将富文本 JSON 渲染到指定的元素中
			
 
				+ *
			
 
				+ * @param {RichTextJSON} body
			
 
				+ * @param {HTMLDivElement} container
			
 
				+ */
			
 
				+export function renderRichText(body, container, isPreview = true) {
			
 
				+  _isPreview = isPreview;
			
 
				+  // _container = container;
			
 
				+  let sections = body?.sections || [];
			
 
				+  let nodes = [];
			
 
				+  sections.forEach((section) => {
			
 
				+    nodes.push(renderSection(section));
			
 
				+  });
			
 
				+  if (container != undefined) {
			
 
				+    container.innerHTML = "";
			
 
				+    nodes.forEach((node) => {
			
 
				+      container.appendChild(node);
			
 
				+    });
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * @param {RichTextSectionJSON} section
			
 
				+ * @returns {HTMLDivElement} 返回根据 section 渲染好的 HTMLDivElement
			
 
				+ */
			
 
				+function renderSection(section) {
			
 
				+  let blocks = section.blocks || [];
			
 
				+  let inline = blocks.length > 1;
			
 
				+  let node = document.createElement("div");
			
 
				+  // node.style = "display: flex;";
			
 
				+  blocks.forEach((block) => {
			
 
				+    node.appendChild(renderBlock(block, inline));
			
 
				+  });
			
 
				+  return node;
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * @param {RichTextBlockJSON} block
			
 
				+ * @param {Boolean} inline 图片是否以 inline 的样式展示
			
 
				+ * @returns {HTMLElement} 返回根据 block 渲染好的 HTMLElement
			
 
				+ */
			
 
				+function renderBlock(block, inline) {
			
 
				+  // let node = document.createElement('span')
			
 
				+  // let classList = node.classList
			
 
				+  let node;
			
 
				+  if (block.type === "text") {
			
 
				+    if (block.param) {
			
 
				+      let nodeNames = ["u", "b", "i", "sup", "sub"];
			
 
				+      let nodeParams = {
			
 
				+        u: "underline",
			
 
				+        b: "bold",
			
 
				+        i: "italic",
			
 
				+        sup: "sup",
			
 
				+        sub: "sub",
			
 
				+      };
			
 
				+      const nodes = nodeNames
			
 
				+        .filter((nodeName) => block.param[nodeParams[nodeName]])
			
 
				+        .map((nodeName) => {
			
 
				+          return document.createElement(nodeName);
			
 
				+        });
			
 
				+
			
 
				+      nodes.push(document.createTextNode(block.value));
			
 
				+      // 将不为空的元素依次append
			
 
				+      node = nodes.reduceRight((p, c) => {
			
 
				+        c.appendChild(p);
			
 
				+        return c;
			
 
				+      });
			
 
				+    } else {
			
 
				+      node = document.createTextNode(block.value);
			
 
				+    }
			
 
				+  } else if (block.type === "image") {
			
 
				+    node = document.createElement("img");
			
 
				+    if (inline) node.classList.add("inline");
			
 
				+
			
 
				+    node.src = block.value;
			
 
				+    node.dataset.isImage = true;
			
 
				+    // 公式latex表达式
			
 
				+    if (block.latex) node.dataset.latex = block.latex;
			
 
				+    // param
			
 
				+    if (block.param) {
			
 
				+      if (block.param.width) node.style.width = block.param.width + "px";
			
 
				+      if (block.param.height) node.style.height = block.param.height + "px";
			
 
				+    }
			
 
				+  } else if (block.type === "cloze") {
			
 
				+    node = document.createElement("img");
			
 
				+    node.src = getAnswerPointImg(block.value);
			
 
				+    node.dataset.isAnswerPoint = true;
			
 
				+    node.dataset.order = block.value;
			
 
				+  } else if (block.type === "audio") {
			
 
				+    // classList.add("audio");
			
 
				+    // let audio = node.appendChild(new Audio());
			
 
				+    // audio.src = block.value;
			
 
				+    // audio.controls = true;
			
 
				+    // span 可以被追加文本内容，不好
			
 
				+    // node = document.createElement("span");
			
 
				+    // node.className = "audio";
			
 
				+    // node.dataset["src"] = block.value;
			
 
				+    // node.innerHTML = "&#9654;";
			
 
				+    // // md5 src?
			
 
				+    // node.id = "what";
			
 
				+    // var sheet = window.document.styleSheets[0];
			
 
				+    // sheet.insertRule(
			
 
				+    //   `#what::after{content: "1:03"; font-size: 11px;}`,
			
 
				+    //   sheet.cssRules.length
			
 
				+    // );
			
 
				+
			
 
				+    if (_isPreview) {
			
 
				+      node = document.createElement("audio");
			
 
				+      node.className = "audio";
			
 
				+      node.src = block.value;
			
 
				+      node.controls = true;
			
 
				+      node.controlsList = "nodownload";
			
 
				+    } else {
			
 
				+      node = document.createElement("img");
			
 
				+      node.className = "audio";
			
 
				+      node.src = "/img/editor/text_audio.png";
			
 
				+      node.dataset.audioSrc = block.value;
			
 
				+      node.dataset.isAudio = true;
			
 
				+      node.dataset.duration = block.param.duration;
			
 
				+      const mDuration = unix(0);
			
 
				+      mDuration.second(block.param.duration);
			
 
				+      node.title = mDuration.format("mm:ss");
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  return node;
			
 
				+}
			
--- a/src/components/vEditor/toJSON.js
+++ b/src/components/vEditor/toJSON.js
@@ -0,0 +1,166 @@
 
				+/**
			
 
				+ * 将编辑器的 HTMLDivElement 转为我们需要的 JSON.stringify(RichTextJSON)
			
 
				+ *
			
 
				+ * @param {HTMLDivElement} editor
			
 
				+ *
			
 
				+ * @returns {String} JSON.stringify(RichTextJSON)
			
 
				+ */
			
 
				+export function toJSON(editor) {
			
 
				+  let newSections = [];
			
 
				+  const nodesSectionsCollector = toNodeSections(editor);
			
 
				+  nodesSectionsCollector.forEach((section) => {
			
 
				+    let newSection = { blocks: [] };
			
 
				+    section.forEach((elem) => {
			
 
				+      const newBlock = toJSONBlock(elem);
			
 
				+      if (newBlock) newSection.blocks.push(newBlock);
			
 
				+    });
			
 
				+
			
 
				+    if (!newSection.blocks.length) {
			
 
				+      // 空行特殊处理
			
 
				+      newSection.blocks = [{ type: "text", value: "", param: null }];
			
 
				+    }
			
 
				+    newSections.push(newSection);
			
 
				+  });
			
 
				+  // console.log(newSections);
			
 
				+
			
 
				+  /** @type {RichTextJSON} */
			
 
				+  const result = { sections: newSections };
			
 
				+  return JSON.stringify(result, null);
			
 
				+}
			
 
				+
			
 
				+function toNodeSections(node) {
			
 
				+  let sections = [];
			
 
				+  let curSection = [];
			
 
				+
			
 
				+  const checkIsDiv = (elem) => {
			
 
				+    return elem.nodeType == Node.ELEMENT_NODE && elem.nodeName === "DIV";
			
 
				+  };
			
 
				+
			
 
				+  const parseNode = (node) => {
			
 
				+    node.childNodes.forEach((elem) => {
			
 
				+      if (checkIsDiv(elem) && curSection.length) {
			
 
				+        sections.push(curSection);
			
 
				+        curSection = [];
			
 
				+      }
			
 
				+
			
 
				+      if (elem.childNodes && elem.childNodes.length) {
			
 
				+        parseNode(elem);
			
 
				+      } else {
			
 
				+        curSection.push(elem);
			
 
				+      }
			
 
				+    });
			
 
				+  };
			
 
				+
			
 
				+  parseNode(node);
			
 
				+
			
 
				+  if (curSection.length) {
			
 
				+    sections.push(curSection);
			
 
				+  }
			
 
				+
			
 
				+  // console.log(sections);
			
 
				+  return sections;
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * 目前限定结构只有三层 u b i
			
 
				+ *
			
 
				+ * @param {Node} e
			
 
				+ * @param {String} tag
			
 
				+ */
			
 
				+function checkAncestorElementTag(e) {
			
 
				+  let parentElement = e.parentElement;
			
 
				+  let elementTags = [];
			
 
				+  let validTags = ["I", "B", "U", "SUB", "SUP"];
			
 
				+  while (
			
 
				+    parentElement &&
			
 
				+    parentElement.className &&
			
 
				+    parentElement.className.indexOf("v-editor-body") === -1
			
 
				+  ) {
			
 
				+    if (validTags.includes(parentElement.nodeName)) {
			
 
				+      elementTags.push(parentElement.nodeName);
			
 
				+    } else {
			
 
				+      parentElement = parentElement.parentElement;
			
 
				+    }
			
 
				+  }
			
 
				+  return elementTags;
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * 将 HTML Node 转为 block (JSON)
			
 
				+ * @param {Node} e
			
 
				+ * @returns {RichTextBlockJSON}
			
 
				+ */
			
 
				+function toJSONBlock(e) {
			
 
				+  /** @type {RichTextBlockJSON} */
			
 
				+  let block = {};
			
 
				+  if (e.nodeType === Node.TEXT_NODE) {
			
 
				+    block.type = "text";
			
 
				+    block.value = e.textContent;
			
 
				+    const elementTags = checkAncestorElementTag(e);
			
 
				+    let param = {
			
 
				+      italic: elementTags.includes("I"),
			
 
				+      bold: elementTags.includes("B"),
			
 
				+      underline: elementTags.includes("U"),
			
 
				+      sup: elementTags.includes("SUP"),
			
 
				+      sub: elementTags.includes("SUB"),
			
 
				+    };
			
 
				+    const allFalse = !Object.values(param).some((v) => v);
			
 
				+    block.param = allFalse ? null : param;
			
 
				+  } else if (e.nodeType == Node.ELEMENT_NODE && e.nodeName === "U") {
			
 
				+    block.type = "text";
			
 
				+    block.value = e.textContent;
			
 
				+    block.param = { underline: true };
			
 
				+  } else if (e.nodeType == Node.ELEMENT_NODE && e.nodeName === "B") {
			
 
				+    block.type = "text";
			
 
				+    block.value = e.textContent;
			
 
				+    block.param = { bold: true };
			
 
				+  } else if (e.nodeType == Node.ELEMENT_NODE && e.nodeName === "I") {
			
 
				+    block.type = "text";
			
 
				+    block.value = e.textContent;
			
 
				+    block.param = { italic: true };
			
 
				+  } else if (
			
 
				+    e.nodeType == Node.ELEMENT_NODE &&
			
 
				+    e.nodeName === "IMG" &&
			
 
				+    e.dataset.isImage
			
 
				+  ) {
			
 
				+    block.type = "image";
			
 
				+    // 公式latex表达式
			
 
				+    if (e.dataset.latex) {
			
 
				+      block.latex = e.dataset.latex;
			
 
				+    }
			
 
				+    // change base64 image size, draw canvas
			
 
				+    block.value = e.src;
			
 
				+    block.param = {
			
 
				+      width: e.clientWidth,
			
 
				+      height: e.clientHeight,
			
 
				+    };
			
 
				+  } else if (
			
 
				+    e.nodeType == Node.ELEMENT_NODE &&
			
 
				+    e.nodeName === "IMG" &&
			
 
				+    e.dataset.isAudio
			
 
				+  ) {
			
 
				+    block.type = "audio";
			
 
				+    // 音频使用云端地址
			
 
				+    block.value = e.dataset.audioSrc;
			
 
				+    block.param = { duration: e.dataset.duration };
			
 
				+  } else if (
			
 
				+    e.nodeType == Node.ELEMENT_NODE &&
			
 
				+    e.nodeName === "IMG" &&
			
 
				+    e.dataset.isAnswerPoint
			
 
				+  ) {
			
 
				+    block.type = "cloze";
			
 
				+    block.value = e.dataset.order * 1;
			
 
				+    block.param = null;
			
 
				+  } else if (e.nodeType == Node.ELEMENT_NODE && e.nodeName === "BR") {
			
 
				+    block.type = "text";
			
 
				+    block.value = "";
			
 
				+    block.param = null;
			
 
				+  } else {
			
 
				+    console.log("toJSONBlock: 非法", e);
			
 
				+  }
			
 
				+
			
 
				+  // if (block.type === "text" && block.value === "") {
			
 
				+  //   block = null; // 返回null的block，从json中剔除
			
 
				+  // }
			
 
				+  return block;
			
 
				+}
			
--- a/src/components/vEditor/utils.js
+++ b/src/components/vEditor/utils.js
@@ -0,0 +1,91 @@
 
				+/**
			
 
				+ *
			
 
				+ * @param {HTMLDivElement} editor 要操作的编辑器dom，还未想好怎么用
			
 
				+ * @param {String} tagName IMG | AUDIO
			
 
				+ * @param {String} value 相对于本地电脑资源的路径
			
 
				+ */
			
 
				+export function insertTagToEditor(editor, tagName, value, attributes = {}) {
			
 
				+  let sel, range;
			
 
				+  if (window.getSelection) {
			
 
				+    sel = window.getSelection();
			
 
				+    if (sel.getRangeAt && sel.rangeCount) {
			
 
				+      range = sel.getRangeAt(0);
			
 
				+      range.deleteContents();
			
 
				+
			
 
				+      // TODO:
			
 
				+      // if (tagName === "AUDIO") {
			
 
				+      //   const el = document.createElement("audio");
			
 
				+      //   el.src = value;
			
 
				+      //   el.className = "audio";
			
 
				+      //   // el.style = "height: 18px; width: 180px;";
			
 
				+      //   el.controls = true;
			
 
				+      //   el.controlsList = "nodownload";
			
 
				+      //   // el.draggable = true;
			
 
				+      //   range.insertNode(el);
			
 
				+      // }
			
 
				+      if (tagName === "IMG") {
			
 
				+        const el = document.createElement("img");
			
 
				+        // console.log(value);
			
 
				+        el.src = value;
			
 
				+        el.dataset.isImage = true;
			
 
				+        if (Object.keys(attributes).length) {
			
 
				+          Object.keys(attributes).forEach((k) => {
			
 
				+            el.setAttribute(k, attributes[k]);
			
 
				+          });
			
 
				+        }
			
 
				+        range.insertNode(el);
			
 
				+        range.collapse();
			
 
				+      }
			
 
				+      editor && editor.dispatchEvent(new Event("input"));
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * 将音频路径转换为图片占位符
			
 
				+ *
			
 
				+ * @param {aduioSrc} value 相对于本地电脑资源的路径
			
 
				+ * @returns {HTMLImageElement} 图片节点
			
 
				+ */
			
 
				+export async function audioToImageNode(audioSrc) {
			
 
				+  const duration = 1;
			
 
				+
			
 
				+  const el = document.createElement("img");
			
 
				+  el.src = "/img/editor/text_audio.png";
			
 
				+  el.dataset.isAudio = true;
			
 
				+  el.dataset.audioSrc = audioSrc;
			
 
				+  el.dataset.duration = duration;
			
 
				+  const mDuration = require("moment").unix(0);
			
 
				+  mDuration.second(duration);
			
 
				+  el.title = mDuration.format("mm:ss");
			
 
				+
			
 
				+  el.className = "audio";
			
 
				+
			
 
				+  return el;
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * 获取答题点序号图片base64
			
 
				+ * @param {number} serialNo 答题点序号
			
 
				+ * @returns dataUrl
			
 
				+ */
			
 
				+export function getAnswerPointImg(serialNo) {
			
 
				+  const canvas = document.createElement("canvas");
			
 
				+  const ctx = canvas.getContext("2d");
			
 
				+  canvas.width = 64;
			
 
				+  canvas.height = 32;
			
 
				+  ctx.font = "bolder 30px serif";
			
 
				+  ctx.textAlign = "center";
			
 
				+  ctx.textBaseline = "middle";
			
 
				+  ctx.fillText(`（${serialNo}）`, 32, 16);
			
 
				+  return canvas.toDataURL();
			
 
				+}
			
 
				+
			
 
				+export function base64ToBlob(base64Str) {
			
 
				+  var bytes = atob(base64Str.split(",")[1]);
			
 
				+  let arr = new Uint8Array(bytes.length);
			
 
				+  for (let i = 0; i < bytes.length; i++) {
			
 
				+    arr[i] = bytes.charCodeAt(i);
			
 
				+  }
			
 
				+  return new Blob([arr], { type: "image/png" });
			
 
				+}
			
--- a/src/modules/questions/views/EditOtherQuestion.vue
+++ b/src/modules/questions/views/EditOtherQuestion.vue
@@ -190,7 +190,7 @@
 
				       <el-form class="form-tight" label-width="100px">
			
 
				         <!-- end -->
			
 
				         <el-form-item label="题干" prop="quesBody">
			
 
				-          <ckeditor v-model="quesModel.quesBody"></ckeditor>
			
 
				+          <v-editor v-model="quesModel.quesBody"></v-editor>
			
 
				         </el-form-item>
			
 
				 
			
 
				         <el-form-item
			
@@ -202,7 +202,7 @@
 
				               {{ index | optionOrderWordFilter }}
			
 
				             </div>
			
 
				             <div class="option-body">
			
 
				-              <ckeditor v-model="option.quesBody"></ckeditor>
			
 
				+              <v-editor v-model="option.quesBody"></v-editor>
			
 
				             </div>
			
 
				           </div>
			
 
				         </el-form-item>
			
@@ -218,7 +218,7 @@
 
				           label="答案"
			
 
				           prop="quesAnswer"
			
 
				         >
			
 
				-          <ckeditor v-model="quesModel.quesAnswer"></ckeditor>
			
 
				+          <v-editor v-model="quesModel.quesAnswer"></v-editor>
			
 
				         </el-form-item>
			
 
				         <el-form-item
			
 
				           v-if="quesModel.questionType == 'BOOL_ANSWER_QUESTION'"
			
@@ -237,11 +237,9 @@
 
				 <script>
			
 
				 import { QUESTION_API } from "@/constants/constants";
			
 
				 import { isEmptyStr, QUESTION_TYPES } from "../constants/constants";
			
 
				-import ckeditor from "../component/ckeditor.vue";
			
 
				 
			
 
				 export default {
			
 
				   name: "EditOtherApp",
			
 
				-  components: { ckeditor },
			
 
				   data() {
			
 
				     return {
			
 
				       fullscreenLoading: false,
			
--- a/src/modules/questions/views/EditPaper.vue
+++ b/src/modules/questions/views/EditPaper.vue
@@ -4,7 +4,6 @@
 
				     class="edit-paper"
			
 
				     element-loading-text="拼命加载中。。。"
			
 
				   >
			
 
				-    <!-- <ckeditor v-model="examRemark"></ckeditor> -->
			
 
				     <div class="edit-header">
			
 
				       <div class="edit-header-top box-justify">
			
 
				         <div class="header-info">
			
@@ -559,10 +558,10 @@
 
				           ></el-input>
			
 
				         </el-form-item>
			
 
				         <el-form-item label="大题描述">
			
 
				-          <ckeditor
			
 
				+          <v-editor
			
 
				             v-model="editpaperDetail.description"
			
 
				             class="area-ckeditor"
			
 
				-          ></ckeditor>
			
 
				+          ></v-editor>
			
 
				         </el-form-item>
			
 
				       </el-form>
			
 
				       <div slot="footer">
			
@@ -809,7 +808,7 @@
 
				         </el-row>
			
 
				         <!-- end by weiwenhai -->
			
 
				         <el-form-item label="题目">
			
 
				-          <ckeditor v-model="quesModel.quesBody"></ckeditor>
			
 
				+          <v-editor v-model="quesModel.quesBody"></v-editor>
			
 
				         </el-form-item>
			
 
				         <el-form-item
			
 
				           v-for="(quesOption, optIndex) in quesModel.quesOptions"
			
@@ -877,7 +876,7 @@
 
				               "
			
 
				               class="option-body"
			
 
				             >
			
 
				-              <ckeditor v-model="quesOption.optionBody"></ckeditor>
			
 
				+              <v-editor v-model="quesOption.optionBody"></v-editor>
			
 
				             </div>
			
 
				             <div
			
 
				               v-if="
			
@@ -927,7 +926,7 @@
 
				           "
			
 
				         >
			
 
				           <el-form-item label="答案">
			
 
				-            <ckeditor v-model="quesModel.quesAnswer"></ckeditor>
			
 
				+            <v-editor v-model="quesModel.quesAnswer"></v-editor>
			
 
				           </el-form-item>
			
 
				         </div>
			
 
				         <!-- 单选或多选 -->
			
@@ -978,7 +977,7 @@
 
				     >
			
 
				       <el-form label-position="top">
			
 
				         <el-form-item label="考试说明：">
			
 
				-          <ckeditor v-model="examRemark" class="area-ckeditor"></ckeditor>
			
 
				+          <v-editor v-model="examRemark" emit-type="html"></v-editor>
			
 
				         </el-form-item>
			
 
				       </el-form>
			
 
				       <div slot="footer">
			
@@ -1143,7 +1142,6 @@
 
				 import { QUESTION_API } from "@/constants/constants";
			
 
				 import { isEmptyStr, QUESTION_TYPES } from "../constants/constants";
			
 
				 import { mapState } from "vuex";
			
 
				-import ckeditor from "../component/ckeditor.vue";
			
 
				 import PaperBasicComposition from "./PaperBasicComposition.vue";
			
 
				 import PaperQuestionType from "./PaperQuestionType.vue";
			
 
				 import PaperBlue from "./PaperBlue.vue";
			
@@ -1152,7 +1150,6 @@ import AuditInfo from "./AuditInfo.vue";
 
				 export default {
			
 
				   name: "EditPaperApp",
			
 
				   components: {
			
 
				-    ckeditor,
			
 
				     PaperBasicComposition,
			
 
				     PaperQuestionType,
			
 
				     PaperBlue,
			
--- a/src/modules/questions/views/EditPaperPendingTrial.vue
+++ b/src/modules/questions/views/EditPaperPendingTrial.vue
@@ -603,10 +603,7 @@
 
				           ></el-input>
			
 
				         </el-form-item>
			
 
				         <el-form-item label="大题描述">
			
 
				-          <ckeditor
			
 
				-            v-model="editpaperDetail.description"
			
 
				-            class="area-ckeditor"
			
 
				-          ></ckeditor>
			
 
				+          <v-editor v-model="editpaperDetail.description"></v-editor>
			
 
				         </el-form-item>
			
 
				       </el-form>
			
 
				       <div slot="footer">
			
@@ -852,7 +849,7 @@
 
				         </el-row>
			
 
				         <!-- end by weiwenhai -->
			
 
				         <el-form-item label="题目">
			
 
				-          <ckeditor v-model="quesModel.quesBody"></ckeditor>
			
 
				+          <v-editor v-model="quesModel.quesBody"></v-editor>
			
 
				         </el-form-item>
			
 
				         <el-form-item
			
 
				           v-for="(quesOption, optIndex) in quesModel.quesOptions"
			
@@ -920,7 +917,7 @@
 
				               "
			
 
				               class="option-body"
			
 
				             >
			
 
				-              <ckeditor v-model="quesOption.optionBody"></ckeditor>
			
 
				+              <v-editor v-model="quesOption.optionBody"></v-editor>
			
 
				             </div>
			
 
				             <div
			
 
				               v-if="
			
@@ -970,7 +967,7 @@
 
				           "
			
 
				         >
			
 
				           <el-form-item label="答案">
			
 
				-            <ckeditor v-model="quesModel.quesAnswer"></ckeditor>
			
 
				+            <v-editor v-model="quesModel.quesAnswer"></v-editor>
			
 
				           </el-form-item>
			
 
				         </div>
			
 
				         <!-- 单选或多选 -->
			
@@ -1017,7 +1014,7 @@
 
				     >
			
 
				       <el-form label-position="top">
			
 
				         <el-form-item label="考试说明：">
			
 
				-          <ckeditor v-model="examRemark" class="area-ckeditor"></ckeditor>
			
 
				+          <v-editor v-model="examRemark" emit-type="html"></v-editor>
			
 
				         </el-form-item>
			
 
				       </el-form>
			
 
				       <div slot="footer">
			
@@ -1198,7 +1195,6 @@
 
				 import { QUESTION_API } from "@/constants/constants";
			
 
				 import { isEmptyStr, QUESTION_TYPES } from "../constants/constants";
			
 
				 import { mapState } from "vuex";
			
 
				-import ckeditor from "../component/ckeditor.vue";
			
 
				 import PaperBasicComposition from "./PaperBasicComposition.vue";
			
 
				 import PaperQuestionType from "./PaperQuestionType.vue";
			
 
				 import PaperBlue from "./PaperBlue.vue";
			
@@ -1208,7 +1204,6 @@ import AuditPaper from "./AuditPaper.vue";
 
				 export default {
			
 
				   name: "EditPaperApp",
			
 
				   components: {
			
 
				-    ckeditor,
			
 
				     PaperBasicComposition,
			
 
				     PaperQuestionType,
			
 
				     PaperBlue,
			
--- a/src/modules/questions/views/EditSelectQuestion.vue
+++ b/src/modules/questions/views/EditSelectQuestion.vue
@@ -194,7 +194,7 @@
 
				     <div class="part-box">
			
 
				       <el-form class="form-tight" label-width="100px">
			
 
				         <el-form-item label="题干" prop="quesBody">
			
 
				-          <ckeditor v-model="quesModel.quesBody"></ckeditor>
			
 
				+          <v-editor v-model="quesModel.quesBody"></v-editor>
			
 
				         </el-form-item>
			
 
				         <el-form-item
			
 
				           v-for="(option, index) in quesModel.quesOptions"
			
@@ -214,7 +214,7 @@
 
				               ></el-checkbox>
			
 
				             </div>
			
 
				             <div class="option-body">
			
 
				-              <ckeditor v-model="option.optionBody"></ckeditor>
			
 
				+              <v-editor v-model="option.optionBody"></v-editor>
			
 
				             </div>
			
 
				             <div class="option-delete">
			
 
				               <el-button
			
@@ -247,11 +247,11 @@
 
				 <script>
			
 
				 import { QUESTION_API } from "@/constants/constants";
			
 
				 import { isEmptyStr, QUESTION_TYPES } from "../constants/constants";
			
 
				-import ckeditor from "../component/ckeditor.vue";
			
 
				+// import ckeditor from "../component/ckeditor.vue";
			
 
				 
			
 
				 export default {
			
 
				   name: "EditSelectApp",
			
 
				-  components: { ckeditor },
			
 
				+  // components: { ckeditor },
			
 
				   data() {
			
 
				     return {
			
 
				       questionTypes: QUESTION_TYPES,
			
--- a/src/modules/questions/views/InsertBluePaperStructure.vue
+++ b/src/modules/questions/views/InsertBluePaperStructure.vue
@@ -80,12 +80,12 @@
 
				         </el-form-item>
			
 
				         <el-form-item label-width="0px"> </el-form-item>
			
 
				       </el-form>
			
 
				-      <ckeditor
			
 
				+      <v-editor
			
 
				         v-model="blueStruct.examRemark"
			
 
				-        class="area-ckeditor"
			
 
				         :height="hValue"
			
 
				+        emit-type="html"
			
 
				         placeholder="请输入考试说明"
			
 
				-      ></ckeditor>
			
 
				+      ></v-editor>
			
 
				     </div>
			
 
				     <div class="part-box">
			
 
				       <!-- 页面列表 -->
			
@@ -206,13 +206,9 @@
 
				 <script>
			
 
				 import { QUESTION_TYPES } from "../constants/constants";
			
 
				 import { QUESTION_API } from "@/constants/constants";
			
 
				-import ckeditor from "../component/ckeditor.vue";
			
 
				 
			
 
				 export default {
			
 
				   name: "InsertBluePaperStructure",
			
 
				-  components: {
			
 
				-    ckeditor,
			
 
				-  },
			
 
				   data() {
			
 
				     return {
			
 
				       hValue: "100px",
			
--- a/src/modules/questions/views/InsertPaperStructure.vue
+++ b/src/modules/questions/views/InsertPaperStructure.vue
@@ -68,12 +68,12 @@
 
				         </el-form-item>
			
 
				         <el-form-item label-width="0px"> </el-form-item>
			
 
				       </el-form>
			
 
				-      <ckeditor
			
 
				+      <v-editor
			
 
				         v-model="paperStruct.examRemark"
			
 
				-        class="area-ckeditor"
			
 
				         :height="hValue"
			
 
				+        emit-type="html"
			
 
				         placeholder="请输入考试说明"
			
 
				-      ></ckeditor>
			
 
				+      ></v-editor>
			
 
				     </div>
			
 
				     <div class="part-box">
			
 
				       <!-- 页面列表 -->
			
@@ -187,13 +187,9 @@
 
				 
			
 
				 <script>
			
 
				 import { QUESTION_API } from "@/constants/constants";
			
 
				-import ckeditor from "../component/ckeditor.vue";
			
 
				 
			
 
				 export default {
			
 
				   name: "InsertPaperStructure",
			
 
				-  components: {
			
 
				-    ckeditor,
			
 
				-  },
			
 
				   data() {
			
 
				     return {
			
 
				       hValue: "100px",
			
--- a/src/plugins/globalVuePlugins.js
+++ b/src/plugins/globalVuePlugins.js
@@ -1,4 +1,7 @@
 
				 import { objAssign } from "@/plugins/utils";
			
 
				+// component
			
 
				+import VEditor from "../components/vEditor/VEditor";
			
 
				+import RichText from "../components/RichText";
			
 
				 // mixins
			
 
				 import commonMixins from "../mixins/common";
			
 
				 
			
@@ -6,7 +9,9 @@ export default {
 
				   install: function (Vue) {
			
 
				     // 实例方法
			
 
				     Vue.prototype.$objAssign = objAssign;
			
 
				-
			
 
				+    // component
			
 
				+    Vue.component("VEditor", VEditor);
			
 
				+    Vue.component("RichText", RichText);
			
 
				     //全局 mixins
			
 
				     Vue.mixin(commonMixins);
			
 
				   },