tijiao

src/views/modules/course/course-add-or-update.vue

@@ -118,8 +118,11 @@
       </el-table>
       </div>
     <div style="text-align:center; margin-bottom:15px" ><el-button @click="showProTable" size="mini" type="primary">添加关联书籍</el-button></div>
-      <el-form-item label="课程介绍" prop="sort" style="margin-bottom: 140px;">
+      <el-form-item label="课程介绍" prop="sort" style="margin-bottom: 140px;"   v-loading="uploadLoading"
-        <div style="height: calc(620px - 120px)">
+          element-loading-text="拼命加载中"
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 0, 0, 0.8)">
+        <div style="height: calc(620px )">
           <el-upload
             class="chapter-avatar-uploader"
             :action="baseUrl + '/oss/fileoss'"
@@ -129,6 +132,7 @@
           >
           </el-upload>
           <quill-editor
+       
             v-model="dataForm.content"
             ref="myQuillEditor"
             :options="editorOption"
@@ -136,7 +140,7 @@
             @focus="onEditorFocus($event)"
             @ready="onEditorReady($event)"
             class="chapter_editor"
-            style="height: 100%;"
+            style="height: calc(100% - 100px);"
           >
           </quill-editor>
         </div>
@@ -152,6 +156,7 @@
 <script>
 import global from "../../common/common.vue"; //引入共用组间
 import { quillEditor } from "vue-quill-editor";
+import axios from "axios";
 import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
 import "quill/dist/quill.bubble.css";
@@ -188,12 +193,16 @@ export default {
   }, 
   data() {
     return {
+      quillEditorIndex: 0,
+      uploadLoading: false,
       editorOption: {
         modules: {
           history: {
             delay: 1000,
             maxStack: 50,
             userOnly: false
+          }, clipboard: {
+            matchers: [["img", this.handlePasteImg]]
           },
           toolbar: {
             container: toolbarOptions,
@@ -379,6 +388,120 @@ export default {
     })
   },
   methods: {
+    handlePasteImg(node, delta) {
+      this.uploadLoading = true;
+      var that = this;
+      let ops = [];
+      delta.ops.forEach(async (op, index) => {
+        if (op.insert && typeof op.insert !== "string") {
+          // 如果粘贴了图片，这里会是一个对象
+          if (op.insert.image) {
+            if (op.insert.image.includes(";base64")) {
+              let file = that.dataURLtoFile(
+                op.insert.image,
+                `paste-${Math.random()
+                  .toString(36)
+                  .slice(-8)}.jpg`
+              );
+              console.log("file at line 397:", file);
+              // key 值可以自己用当前日期生成
+              let key = `detail/${new Date().getTime()}${Math.random()
+                .toString(36)
+                .slice(-8)}.jpg`;
+              let formdata = new FormData();
+              formdata.append("file", file);
+              formdata.append("fileName", key);
+              formdata.append("key", key);
+              console.log("🚀 ~ handleRequest ~ formdata:", formdata);
+
+              axios
+                .post(this.baseUrl + "/oss/fileoss", formdata)
+                .then(res => {
+                  console.log("🚀 ~ this.$axios.post ~ res111:", res);
+                  if (res.data.code == 0) {
+                    // 如果上传成功
+                    if (res.data.url) {
+                      // 获取光标所在位置
+                      var quill = that.$refs.myQuillEditor.quill;
+                      var length = this.quillEditorIndex;
+
+                      console.log("length at line 397:", length);
+
+                      // 插入图片，res为服务器返回的图片链接地址
+                      quill.insertEmbed(length, "image", res.data.url);
+                      // 调整光标到最后
+                      quill.setSelection(length + 1);
+                      this.uploadLoading = false;
+                    } else {
+                      // 提示信息，需引入Message
+                      this.$message.error("图片插入失败！");
+                      this.uploadLoading = false;
+                    }
+                  } else {
+                    this.$message.error("图片插入失败！");
+                    this.uploadLoading = false;
+                  }
+                })
+                .catch(err => {
+                  this.$message.error("图片插入失败！");
+                  this.uploadLoading = false;
+                  console.log(err);
+                });
+
+              // const [res, err] = await apiService.getUploadToken();
+              // if (err) return false;
+
+              // let origin = res.data.picture.origin;
+              // const fd = new FormData();
+              // fd.append("key", key);
+              // fd.append("token", res.data.picture.token);
+              // fd.append("origin", origin);
+              // fd.append("time", new Date().getTime());
+              // fd.append("file", file);
+              // apiService
+              //   .uploadImage(fd)
+              //   .then(res => {
+              //     console.log(res, "res");
+              //     let quill = this.$refs.myQuillEditor.quill; // 获取富文本对象
+              //     let length = quill.getSelection().index; // 获取编辑器光标位置
+              //     quill.insertEmbed(length, "image", `${origin}/${res.key}`); // 插入图片  图片地址
+              //     quill.setSelection(length + 1); // 光标后移一位   调整光标到最后
+              //   })
+              //   .catch(err => {
+              //     console.log(err);
+              //   });
+            } else {
+              console.log("op.insert.image at line 407:", op.insert.image);
+              // 获取光标所在位置
+              var quill = that.$refs.myQuillEditor.quill;
+              var length = this.quillEditorIndex;
+
+              console.log("length at line 397:", length);
+
+              // 插入图片，res为服务器返回的图片链接地址
+              quill.insertEmbed(length, "image", op.insert.image);
+              // 调整光标到最后
+              quill.setSelection(length + 1);
+              this.uploadLoading = false;
+            }
+          }
+        }
+      });
+
+      delta.ops = ops; // 不加会报错
+      return delta;
+    },
+    dataURLtoFile(dataurl, name) {
+      let arr = dataurl.split(",");
+      let mime = arr[0].match(/:(.*?);/)[1];
+      let bstr = atob(arr[1]);
+      let n = bstr.length;
+      let u8arr = new Uint8Array(n);
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n);
+      }
+      return new File([u8arr], name, { type: mime });
+    },
     delPro(i){
       console.log('i',i)      
       // this.$emit('delPro',i)
@@ -394,7 +517,7 @@ export default {
       // 如果上传成功
       if (res) {
         // 获取光标所在位置
-        let length = quill.getSelection().index;
+        let length = this.quillEditorIndex;
         // 插入图片，res为服务器返回的图片链接地址
         quill.insertEmbed(length, "image", res.url);
         // 调整光标到最后
@@ -410,7 +533,9 @@ export default {
     },
     // 获得焦点事件
     onEditorFocus(quill) {
-      //console.log('editor focus!', quill)
+      var index = quill.getSelection().index;
+      this.quillEditorIndex = index;
+      console.log("quill at line 839:", this.quillEditorIndex);
     },
     // 准备富文本编辑器
     onEditorReady(quill) {

src/views/modules/courseSettings/chapter-add-or-update.vue

@@ -1,6 +1,9 @@
 <template>
   <div style="height: 100%;">
-    <div style="height: calc(100% - 120px);margin-bottom: 80px;">
+    <div style="height: calc(100% - 60px);margin-bottom: 20px;"  v-loading="uploadLoading"
+          element-loading-text="拼命加载中"
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 0, 0, 0.8)">
       <el-upload
         class="chapter-avatar-uploader"
         :action="baseUrl + '/oss/fileoss'"
@@ -17,7 +20,7 @@
         @focus="onEditorFocus($event)"
         @ready="onEditorReady($event)"
         class="chapter_editor"
-        style="height: 100%;"
+        style="height: calc(100% - 80px);"
       >
       </quill-editor>
     </div>
@@ -32,6 +35,7 @@
 
 <script>
 import global from "../../common/common.vue"; //引入共用组间
+import axios from "axios";
 import { quillEditor } from "vue-quill-editor";
 import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
@@ -66,7 +70,8 @@ const toolbarOptions = [
 export default {
   props: ["dataInfo", "type"],
   data() {
-    return {
+    return {  quillEditorIndex: 0,
+      uploadLoading: false,
       baseUrl: global.baseUrl,
       // 富文本编辑器配置
       editorOption: {
@@ -75,6 +80,8 @@ export default {
             delay: 1000,
             maxStack: 50,
             userOnly: false
+          }, clipboard: {
+            matchers: [["img", this.handlePasteImg]]
           },
           toolbar: {
             container: toolbarOptions,
@@ -122,14 +129,127 @@ export default {
   },
   created() {},
   mounted() {},
-  methods: {
+  methods: {  handlePasteImg(node, delta) {
+      this.uploadLoading = true;
+      var that = this;
+      let ops = [];
+      delta.ops.forEach(async (op, index) => {
+        if (op.insert && typeof op.insert !== "string") {
+          // 如果粘贴了图片，这里会是一个对象
+          if (op.insert.image) {
+            if (op.insert.image.includes(";base64")) {
+              let file = that.dataURLtoFile(
+                op.insert.image,
+                `paste-${Math.random()
+                  .toString(36)
+                  .slice(-8)}.jpg`
+              );
+              console.log("file at line 397:", file);
+              // key 值可以自己用当前日期生成
+              let key = `detail/${new Date().getTime()}${Math.random()
+                .toString(36)
+                .slice(-8)}.jpg`;
+              let formdata = new FormData();
+              formdata.append("file", file);
+              formdata.append("fileName", key);
+              formdata.append("key", key);
+              console.log("🚀 ~ handleRequest ~ formdata:", formdata);
+
+              axios
+                .post(this.baseUrl + "/oss/fileoss", formdata)
+                .then(res => {
+                  console.log("🚀 ~ this.$axios.post ~ res111:", res);
+                  if (res.data.code == 0) {
+                    // 如果上传成功
+                    if (res.data.url) {
+                      // 获取光标所在位置
+                      var quill = that.$refs.myQuillEditor.quill;
+                      var length = this.quillEditorIndex;
+
+                      console.log("length at line 397:", length);
+
+                      // 插入图片，res为服务器返回的图片链接地址
+                      quill.insertEmbed(length, "image", res.data.url);
+                      // 调整光标到最后
+                      quill.setSelection(length + 1);
+                      this.uploadLoading = false;
+                    } else {
+                      // 提示信息，需引入Message
+                      this.$message.error("图片插入失败！");
+                      this.uploadLoading = false;
+                    }
+                  } else {
+                    this.$message.error("图片插入失败！");
+                    this.uploadLoading = false;
+                  }
+                })
+                .catch(err => {
+                  this.$message.error("图片插入失败！");
+                  this.uploadLoading = false;
+                  console.log(err);
+                });
+
+              // const [res, err] = await apiService.getUploadToken();
+              // if (err) return false;
+
+              // let origin = res.data.picture.origin;
+              // const fd = new FormData();
+              // fd.append("key", key);
+              // fd.append("token", res.data.picture.token);
+              // fd.append("origin", origin);
+              // fd.append("time", new Date().getTime());
+              // fd.append("file", file);
+              // apiService
+              //   .uploadImage(fd)
+              //   .then(res => {
+              //     console.log(res, "res");
+              //     let quill = this.$refs.myQuillEditor.quill; // 获取富文本对象
+              //     let length = quill.getSelection().index; // 获取编辑器光标位置
+              //     quill.insertEmbed(length, "image", `${origin}/${res.key}`); // 插入图片  图片地址
+              //     quill.setSelection(length + 1); // 光标后移一位   调整光标到最后
+              //   })
+              //   .catch(err => {
+              //     console.log(err);
+              //   });
+            } else {
+              console.log("op.insert.image at line 407:", op.insert.image);
+              // 获取光标所在位置
+              var quill = that.$refs.myQuillEditor.quill;
+              var length = this.quillEditorIndex;
+
+              console.log("length at line 397:", length);
+
+              // 插入图片，res为服务器返回的图片链接地址
+              quill.insertEmbed(length, "image", op.insert.image);
+              // 调整光标到最后
+              quill.setSelection(length + 1);
+              this.uploadLoading = false;
+            }
+          }
+        }
+      });
+
+      delta.ops = ops; // 不加会报错
+      return delta;
+    },
+    dataURLtoFile(dataurl, name) {
+      let arr = dataurl.split(",");
+      let mime = arr[0].match(/:(.*?);/)[1];
+      let bstr = atob(arr[1]);
+      let n = bstr.length;
+      let u8arr = new Uint8Array(n);
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n);
+      }
+      return new File([u8arr], name, { type: mime });
+    },
     contentUploadSuccess(res, file) {
       // console.log(res)
       let quill = this.$refs.myQuillEditor.quill;
       // 如果上传成功
       if (res) {
         // 获取光标所在位置
-        let length = quill.getSelection().index;
+        let length = this.quillEditorIndex;
         // 插入图片，res为服务器返回的图片链接地址
         quill.insertEmbed(length, "image", res.url);
         // 调整光标到最后
@@ -145,6 +265,9 @@ export default {
     },
     // 获得焦点事件
     onEditorFocus(quill) {
+      var index = quill.getSelection().index;
+      this.quillEditorIndex = index;
+      console.log("quill at line 839:", this.quillEditorIndex);
       //console.log('editor focus!', quill)
     },
     // 准备富文本编辑器