所有的富文本粘贴截图时上传图片到服务器，并做占位符处理

src/api/knowledgeTree.js

@@ -153,5 +153,13 @@ export default {
   getRunningState(param) {
     return axios.post(urls.getRunningState, param);
   },
+  uploadFile(param) {
+    return axios({
+      url: urls.promptServer,
+      method: 'post',
+      contentType: "multipart/form-data",
+      data: param,
+    })
+  }
 };
 

src/components/knowledgeExtra/AddAssess/index.vue

@@ -329,7 +329,7 @@ it .ql-editor,
               v-model="table.klScaleSaveGroup[0].content"
               :options="editorOption"
               class="ql-editor"
-              ref="quillEditor"
+              ref="scalequillEditor"
               @change="
                 onEditorChange(
                   $event,
@@ -383,6 +383,7 @@ it .ql-editor,
 </template>
 
 <script>
+import api from "@api/knowledgeTree.js";
 import ScaleTable from "./scale-table.vue";
 import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
@@ -508,7 +509,8 @@ export default {
             loading: true,
             name: "upfile",
             size: 1,
-            sizeError: () => {
+            sizeError: (err) => {
+              console.log("errrrrr", err);
               this.$message({
                 showClose: true,
                 message: "请上传 1M 以内的图片！",
@@ -710,6 +712,13 @@ export default {
         } else if (table.textType === 12) {
           // 文本类型单独处理
           // console.dir(table);
+          // 处理富文本的图标 替换占位符 config.imgHost
+          let regExp = new RegExp(config.imgHost, "g");
+          let regContent = table.klScaleSaveGroup[0].content.replace(
+            regExp,
+            "{imageUrlPrefix}"
+          );
+          console.log("regContent", regContent);
           params.klScaleParent.push({
             ...table,
             klScaleSaveGroup: [
@@ -718,7 +727,7 @@ export default {
                 klScaleSub: [
                   {
                     constant: 0,
-                    content: table.klScaleSaveGroup[0].content,
+                    content: regContent,
                     factor: 0,
                     orderNo: 0,
                     remark: "string",
@@ -1093,6 +1102,9 @@ export default {
       ]);
       if (e === 12) {
         this.scaleData.klScaleParent[tableIndex].resultType = null;
+        setTimeout(() => {
+          this.initText();
+        }, 300);
       } else if (e === 11) {
         this.scaleData.klScaleParent[tableIndex].resultType = 1;
       }
@@ -1107,6 +1119,65 @@ export default {
           this.$refs.ScoreResultsTable.resizeTable();
         // this.$refs.ScaleTable.resizeTable();
       });
+    },
+    initText() {
+      "upload";
+      let quillArr;
+      console.log("this.$refs.scalequillEditor", this.$refs.scalequillEditor);
+      if (this.$refs.scalequillEditor && this.$refs.scalequillEditor.length) {
+        quillArr = this.$refs.scalequillEditor;
+      }
+      console.log("s_quill", quillArr);
+      // return;
+      quillArr &&
+        quillArr.forEach((item) => {
+          let { quill } = item;
+          quill.root.addEventListener(
+            "paste",
+            (evt) => {
+              console.log("evt", evt);
+              if (
+                evt.clipboardData &&
+                evt.clipboardData.files &&
+                evt.clipboardData.files.length
+              ) {
+                console.log("ddadada");
+                evt.preventDefault();
+                [].forEach.call(evt.clipboardData.files, (file) => {
+                  console.log("file", file);
+                  if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i))
+                    return;
+                  if (file.size > 1024 * 1000) return;
+                  let formData = new FormData();
+                  formData.append("upfile", file);
+                  api.uploadFile(formData).then((res) => {
+                    console.log("formData", res);
+                    if (res.data.code == "0") {
+                      let imgUrl = config.imgHost + res.data.data.url;
+                      var range = quill.getSelection();
+                      console.log("range", range);
+                      if (range) {
+                        // this.uploadAttachment(res, file, null);
+                        let length = quill.getSelection().index;
+                        quill.insertEmbed(length, "image", imgUrl);
+                        quill.setSelection(length + 1);
+                        //  将光标移动到图片后面
+                        quill.setSelection(range.index + 1);
+                      }
+                    } else {
+                      this.$message({
+                        showClose: true,
+                        message: res.msg,
+                        type: "warning"
+                      });
+                    }
+                  });
+                });
+              }
+            },
+            false
+          );
+        });
     }
   },
   watch: {
@@ -1192,6 +1263,11 @@ export default {
             });
           } else if (table.textType === 12) {
             // 文本
+            let regExp = new RegExp("{imageUrlPrefix}", "g");
+            let regContent = table.subMenuList[0].content.replace(
+              regExp,
+              config.imgHost
+            );
             obj.klScaleParent.push({
               constant: table.constant,
               content: table.content,
@@ -1216,7 +1292,7 @@ export default {
                   two_selectType: null,
                   two_status: null,
                   two_textType: null,
-                  content: table.subMenuList[0].content,
+                  content: regContent,
                   orderNo: table.subMenuList[0].groupNum,
                   pushInfo: table.subMenuList[0].pushInfo,
                   remark: table.subMenuList[0].remark,
@@ -1230,9 +1306,7 @@ export default {
             });
           }
         });
-        // console.dir(obj);
-        // console.dir(scoreresults);
-
+        console.dir(obj);
         this.scaleData = obj;
         if (scoreresults.scoreresultsdatas.length)
           this.scoreresults = scoreresults;
@@ -1255,6 +1329,10 @@ export default {
     this.editorOption.modules.toolbar.container =
       this.toolbars[this.toolbarMode];
   },
-  mounted() {}
+  mounted() {
+    setTimeout(() => {
+      this.initText();
+    }, 500);
+  }
 };
 </script>

src/components/knowledgeExtra/AddDevKnow.vue

@@ -253,7 +253,6 @@ import DevInfo from "./DevInfo";
 import config from "@api/config";
 import $ from "jquery";
 import AddAssess from "./AddAssess";
-import { resolve } from "path";
 
 export default {
   name: "AddDevKnow",
@@ -954,6 +953,10 @@ export default {
         }
         param = paramsAll;
         if (!param.details) param.details = [];
+        param.details.forEach((item) => {
+          let regExp = new RegExp(config.imgHost, "g");
+          item.content = item.content.replace(regExp, "{imageUrlPrefix}");
+        });
         // 评估内容的数据
         param.scale = {};
         if (this.AssesComSHow && this.AssesTabSHow) {
@@ -964,7 +967,7 @@ export default {
           param.scale.modifier = userInfo.linkman;
         }
       }
-
+      // return;
       // this.showSaveDialog(param,'是否'+(this.isEdit?'修改':'保存')+'该静态知识？');
       console.log("param-------");
       console.dir(param);

src/components/knowledgeExtra/DevInfo.vue

@@ -99,6 +99,7 @@
 </template>
 
 <script>
+import api from "@api/knowledgeTree.js";
 import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
 import "quill/dist/quill.bubble.css";
@@ -239,7 +240,54 @@ export default {
       this.filterHiddenPosition();
     }, 200);
   },
-  mounted() {},
+  mounted() {
+    let quill = this.$refs.quillEditor.quill;
+    console.log(quill);
+    quill.root.addEventListener(
+      "paste",
+      (evt) => {
+        console.log("evt", evt);
+        if (
+          evt.clipboardData &&
+          evt.clipboardData.files &&
+          evt.clipboardData.files.length
+        ) {
+          console.log("ddadada");
+          evt.preventDefault();
+          [].forEach.call(evt.clipboardData.files, (file) => {
+            console.log("file", file);
+            if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) return;
+            if (file.size > 1024 * 1000) return;
+            let formData = new FormData();
+            formData.append("upfile", file);
+            api.uploadFile(formData).then((res) => {
+              console.log("formData", res);
+              if (res.data.code == "0") {
+                let imgUrl = config.imgHost + res.data.data.url;
+                var range = quill.getSelection();
+                console.log("range", range);
+                if (range) {
+                  // this.uploadAttachment(res, file, null);
+                  let length = quill.getSelection().index;
+                  quill.insertEmbed(length, "image", imgUrl);
+                  quill.setSelection(length + 1);
+                  //  将光标移动到图片后面
+                  this.$refs.quillEditor.quill.setSelection(range.index + 1);
+                }
+              } else {
+                this.$message({
+                  showClose: true,
+                  message: res.msg,
+                  type: "warning"
+                });
+              }
+            });
+          });
+        }
+      },
+      false
+    );
+  },
   methods: {
     reOrder(i) {
       this.$emit("reOrder", i, this.index);