实现粘贴图片

蔡俊立
Showing 1 changed file with 90 additions and 54 deletions
src/views/system/xttz/components/addDialog.vue
--- a/src/views/system/xttz/components/addDialog.vue
View file @750aee6
+++ b/src/views/system/xttz/components/addDialog.vue
View file @750aee6
 <template>
-  <dialogBox title="新增系统通知" @submitForm="submitForm" saveButton="保存" :isFullscreen="false" width="60%"
+  <dialogBox
-    @closeDialog="closeDialog" v-model="value">
+    title="新增系统通知"
+    @submitForm="submitForm"
+    saveButton="保存"
+    :isFullscreen="false"
+    width="60%"
+    @closeDialog="closeDialog"
+    v-model="value"
+  >
    <el-form ref="ruleForm" :model="ruleForm" label-width="100px" :rules="rules">
      <el-row>
        <el-col :span="12">
@@ -21,14 +28,14 @@
          <el-form-item label="通知内容:" prop="noticeContent">
            <quill-editor
              v-model="ruleForm.noticeContent"
+              class="editor ql-editor"
              ref="myQuillEditor"
              :options="editorOption"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @change="onEditorChange($event)"
              @ready="onEditorReady($event)"
-            >
+            ></quill-editor>
-            </quill-editor>
            <!-- <el-input v-model="ruleForm.noticeContent" type="textarea" :rows="16"></el-input> -->
          </el-form-item>
        </el-col>
@@ -36,8 +43,14 @@
      <el-row>
        <el-col :span="8">
          <el-form-item label="附件:" prop="noticeFileUrl">
-            <el-upload action="" multiple :auto-upload="false" :limit="1"
+            <el-upload
-              :on-change="handleChange" :before-upload="beforeUpload">
+              action
+              multiple
+              :auto-upload="false"
+              :limit="1"
+              :on-change="handleChange"
+              :before-upload="beforeUpload"
+            >
              <el-button icon="el-icon-upload" type="primary">上传</el-button>
              <div slot="tip" class="el-upload__tip">文件大小不超过20MB</div>
            </el-upload>
@@ -45,8 +58,14 @@
        </el-col>
      </el-row>
      <div v-show="false">
-        <el-upload action=""  multiple :auto-upload="false"
+        <el-upload
-              :on-change="RichTexthandleChange" :before-upload="beforeUpload" class="richUpload">
+          action
+          multiple
+          :auto-upload="false"
+          :on-change="RichTexthandleChange"
+          :before-upload="beforeUpload"
+          class="richUpload"
+        >
          <el-button icon="el-icon-upload" type="primary">上传</el-button>
          <div slot="tip" class="el-upload__tip">文件大小不超过20MB</div>
        </el-upload>
@@ -56,32 +75,32 @@
 </template>
 <script>
-import { addSysNotice } from "@/api/notice.js"
+import { addSysNotice } from "@/api/notice.js";
-import { upload } from "@/api/system.js"
+import { upload } from "@/api/system.js";
 import { quillEditor } from "vue-quill-editor";
 export default {
  props: {
-    value: { type: Boolean, default: false },
+    value: { type: Boolean, default: false }
  },
  components: { quillEditor },
-  data () {
+  data() {
    return {
      ruleForm: {
-        noticeTitle: '',
+        noticeTitle: "",
-        noticeContent: '',
+        noticeContent: "",
-        noticeFileUrl: '',
+        noticeFileUrl: "",
-        noticeSource: '',
+        noticeSource: "",
-        noticeType: '1'
+        noticeType: "1"
      },
      rules: {
        noticeTitle: [
-          { required: true, message: '请输入通知标题', trigger: 'blur' }
+          { required: true, message: "请输入通知标题", trigger: "blur" }
        ],
        noticeContent: [
-          { required: true, message: '请输入通知内容', trigger: 'blur' }
+          { required: true, message: "请输入通知内容", trigger: "blur" }
        ],
        noticeSource: [
-          { required: true, message: '请输入通知来源', trigger: 'blur' }
+          { required: true, message: "请输入通知来源", trigger: "blur" }
        ]
      },
      // 富文本编辑器配置
@@ -97,66 +116,76 @@ export default {
              [{ script: "sub" }, { script: "super" }], // 上标/下标
              [{ indent: "-1" }, { indent: "+1" }], // 缩进
              [{ direction: "rtl" }], // 文本方向
-              [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
+              [{ size: ["small", false, "large", "huge"] }], // 字体大小
              [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
              [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
              // [{ font: ['songti'] }], // 字体种类
              [{ align: [] }], // 对齐方式
              ["clean"], // 清除文本格式
-              ["image", "video"], // 链接、图片、视频
+              ["image", "video"] // 链接、图片、视频
            ],
            handlers: {
              image: function(value) {
                if (value) {
                  // 用upload的点击事件代替文本编辑器的图片上传事件
-                        document.querySelector('.richUpload input').click();
+                  document.querySelector(".richUpload input").click();
                } else {
-                        this.quill.format('image', false);
+                  this.quill.format("image", false);
                }
              }
            }
          }
        },
-        placeholder: "请输入正文",
+        placeholder: "请输入正文"
-      },
      }
+    };
  },
- mounted() {
+  watch: {
-    //  自定义粘贴图片功能
+    value(val) {
+      if (val) {
+        let that = this
+        this.$nextTick(() => {
          let quill = this.$refs.myQuillEditor.quill;
-    quill.root.addEventListener("paste",evt => {
+          this.$forceUpdate();
-        console.log(1111);
+          quill.root.addEventListener(
-        if (evt.clipboardData && evt.clipboardData.files &&evt.clipboardData.files.length) {
+            "paste",
-          console.log(2222);
+            evt => {
+              if (
+                evt.clipboardData &&
+                evt.clipboardData.files &&
+                evt.clipboardData.files.length
+              ) {
                evt.preventDefault();
                [].forEach.call(evt.clipboardData.files, file => {
-            console.log(33333);
                  if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
                    return;
                  }
-            console.log(4444);
+                  that.clipboardPictureChange(file);
-            this.RichTexthandleChange(File);
                });
              }
            },
            false
          );
+        });
+      }
+    }
  },
+  mounted() {},
  methods: {
-    submitForm () {
+    submitForm() {
      let that = this;
      that.$refs.ruleForm.validate(valid => {
        if (valid) {
          addSysNotice(this.ruleForm).then(res => {
            if (res.code == 200) {
-              this.$message.success('保存成功')
+              this.$message.success("保存成功");
              this.$emit("input", false);
              this.resetRuleForm();
              this.$parent.queryClick();
            } else {
-              this.$message.error(res.message)
+              this.$message.error(res.message);
            }
-          })
+          });
        } else {
          // console.log('error submit!!');
          return false;
@@ -164,31 +193,38 @@ export default {
      });
    },
    //关闭窗口
-    closeDialog () {
+    closeDialog() {
      this.$emit("input", false);
      this.resetRuleForm();
    },
    //
-    resetRuleForm () {
+    resetRuleForm() {
-      this.$refs['ruleForm'].resetFields();
+      this.$refs["ruleForm"].resetFields();
-      this.ruleForm.noticeType = '1'
+      this.ruleForm.noticeType = "1";
    },
-    beforeUpload (file) {
+    beforeUpload(file) {
-      return true
+      return true;
    },
    //附件上传事件
-    async handleChange (file) {
+    async handleChange(file) {
      var formdata = new FormData();
      formdata.append("file", file.raw);
      upload(formdata).then(res => {
-        this.ruleForm.noticeFileUrl = res.message
+        this.ruleForm.noticeFileUrl = res.message;
-      })
+      });
    },
    //富文本图片上传事件
-    async RichTexthandleChange (file) {
+    RichTexthandleChange(file) {
+      this.uploadPicture(file.raw)
+    },
+    //图片粘贴事件
+    clipboardPictureChange(file) {
+      this.uploadPicture(file)
+    },
+    uploadPicture(file){
      let that = this;
      var formdata = new FormData();
-      formdata.append("file", file.raw);
+      formdata.append("file", file);
      upload(formdata).then(res => {
        //editor对象
        const quill = that.$refs.myQuillEditor.quill;
@@ -196,11 +232,11 @@ export default {
        // 获取光标所在位置
        const length = quill.selection.savedRange.index;
        // 插入图片
-        quill.insertEmbed(length, 'image', res.message);
+        quill.insertEmbed(length, "image", res.message);
        // 调整光标到最后
        quill.setSelection(length + 1);
        //that.quillUpdateImg = false;
-      })
+      });
    },
    onSubmit() {
      //console.log("submit!");
@@ -221,9 +257,9 @@ export default {
    onEditorChange({ quill, html, text }) {
      //console.log("editor change!", quill, html, text);
      //this.content = html;
-    },
    }
-}
+  }
+};
 </script>
 <style scoped lang="scss">
 // .ql-editor{