|  | @@ -3,14 +3,13 @@
 | 
	
		
			
				|  |  |      <el-upload
 | 
	
		
			
				|  |  |        :action="uploadUrl"
 | 
	
		
			
				|  |  |        :on-success="handleUploadSuccess"
 | 
	
		
			
				|  |  | -      :before-upload="handleBeforeUpload"
 | 
	
		
			
				|  |  |        :on-error="handleUploadError"
 | 
	
		
			
				|  |  |        name="file"
 | 
	
		
			
				|  |  |        :show-file-list="false"
 | 
	
		
			
				|  |  |        :headers="headers"
 | 
	
		
			
				|  |  | -      style="display: none;"
 | 
	
		
			
				|  |  | -      ref='upload'
 | 
	
		
			
				|  |  | -      v-if='this.uploadUrl'
 | 
	
		
			
				|  |  | +      style="display: none"
 | 
	
		
			
				|  |  | +      ref="upload"
 | 
	
		
			
				|  |  | +      v-if="this.uploadUrl"
 | 
	
		
			
				|  |  |      >
 | 
	
		
			
				|  |  |      </el-upload>
 | 
	
		
			
				|  |  |      <div class="editor" ref="editor" :style="styles"></div>
 | 
	
	
		
			
				|  | @@ -22,6 +21,7 @@ import Quill from "quill";
 | 
	
		
			
				|  |  |  import "quill/dist/quill.core.css";
 | 
	
		
			
				|  |  |  import "quill/dist/quill.snow.css";
 | 
	
		
			
				|  |  |  import "quill/dist/quill.bubble.css";
 | 
	
		
			
				|  |  | +import { getToken } from "@/utils/auth";
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  export default {
 | 
	
		
			
				|  |  |    name: "Editor",
 | 
	
	
		
			
				|  | @@ -49,11 +49,14 @@ export default {
 | 
	
		
			
				|  |  |      /* 上传地址 */
 | 
	
		
			
				|  |  |      uploadUrl: {
 | 
	
		
			
				|  |  |        type: String,
 | 
	
		
			
				|  |  | -      default: '',
 | 
	
		
			
				|  |  | +      default: "",
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  |    data() {
 | 
	
		
			
				|  |  |      return {
 | 
	
		
			
				|  |  | +      headers: {
 | 
	
		
			
				|  |  | +        Authorization: "Bearer " + getToken()
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  |        Quill: null,
 | 
	
		
			
				|  |  |        currentValue: "",
 | 
	
		
			
				|  |  |        options: {
 | 
	
	
		
			
				|  | @@ -72,7 +75,7 @@ export default {
 | 
	
		
			
				|  |  |              [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
 | 
	
		
			
				|  |  |              [{ align: [] }],                                 // 对齐方式
 | 
	
		
			
				|  |  |              ["clean"],                                       // 清除文本格式
 | 
	
		
			
				|  |  | -            ["link", "image", "video"]                       // 链接、图片、视频
 | 
	
		
			
				|  |  | +            ["link", "image"]                                // 链接、图片
 | 
	
		
			
				|  |  |            ],
 | 
	
		
			
				|  |  |          },
 | 
	
		
			
				|  |  |          placeholder: "请输入内容",
 | 
	
	
		
			
				|  | @@ -115,23 +118,23 @@ export default {
 | 
	
		
			
				|  |  |      init() {
 | 
	
		
			
				|  |  |        const editor = this.$refs.editor;
 | 
	
		
			
				|  |  |        this.Quill = new Quill(editor, this.options);
 | 
	
		
			
				|  |  | -            // 如果设置了上传地址则自定义图片和视频的上传事件
 | 
	
		
			
				|  |  | +      // 如果设置了上传地址则自定义图片上传事件
 | 
	
		
			
				|  |  |        if (this.uploadUrl) {
 | 
	
		
			
				|  |  | -        let toolbar = this.Quill.getModule('toolbar');
 | 
	
		
			
				|  |  | -        toolbar.addHandler('image', (value) => {
 | 
	
		
			
				|  |  | -          this.uploadType = 'image';
 | 
	
		
			
				|  |  | +        let toolbar = this.Quill.getModule("toolbar");
 | 
	
		
			
				|  |  | +        toolbar.addHandler("image", (value) => {
 | 
	
		
			
				|  |  | +          this.uploadType = "image";
 | 
	
		
			
				|  |  |            if (value) {
 | 
	
		
			
				|  |  |              this.$refs.upload.$children[0].$refs.input.click();
 | 
	
		
			
				|  |  |            } else {
 | 
	
		
			
				|  |  | -            this.quill.format('image', false);
 | 
	
		
			
				|  |  | +            this.quill.format("image", false);
 | 
	
		
			
				|  |  |            }
 | 
	
		
			
				|  |  |          });
 | 
	
		
			
				|  |  | -        toolbar.addHandler('video', (value) => {
 | 
	
		
			
				|  |  | -          this.uploadType = 'video';
 | 
	
		
			
				|  |  | +        toolbar.addHandler("video", (value) => {
 | 
	
		
			
				|  |  | +          this.uploadType = "video";
 | 
	
		
			
				|  |  |            if (value) {
 | 
	
		
			
				|  |  |              this.$refs.upload.$children[0].$refs.input.click();
 | 
	
		
			
				|  |  |            } else {
 | 
	
		
			
				|  |  | -            this.quill.format('video', false);
 | 
	
		
			
				|  |  | +            this.quill.format("video", false);
 | 
	
		
			
				|  |  |            }
 | 
	
		
			
				|  |  |          });
 | 
	
		
			
				|  |  |        }
 | 
	
	
		
			
				|  | @@ -154,13 +157,31 @@ export default {
 | 
	
		
			
				|  |  |          this.$emit("on-editor-change", eventName, ...args);
 | 
	
		
			
				|  |  |        });
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  | +    handleUploadSuccess(res, file) {
 | 
	
		
			
				|  |  | +      // 获取富文本组件实例
 | 
	
		
			
				|  |  | +      let quill = this.Quill;
 | 
	
		
			
				|  |  | +      // 如果上传成功
 | 
	
		
			
				|  |  | +      if (res.code == 200) {
 | 
	
		
			
				|  |  | +        // 获取光标所在位置
 | 
	
		
			
				|  |  | +        let length = quill.getSelection().index;
 | 
	
		
			
				|  |  | +        // 插入图片  res.url为服务器返回的图片地址
 | 
	
		
			
				|  |  | +        quill.insertEmbed(length, "image", res.url);
 | 
	
		
			
				|  |  | +        // 调整光标到最后
 | 
	
		
			
				|  |  | +        quill.setSelection(length + 1);
 | 
	
		
			
				|  |  | +      } else {
 | 
	
		
			
				|  |  | +        this.$message.error("图片插入失败");
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    handleUploadError() {
 | 
	
		
			
				|  |  | +      this.$message.error("图片插入失败");
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  |  };
 | 
	
		
			
				|  |  |  </script>
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  <style>
 | 
	
		
			
				|  |  |  .editor, .ql-toolbar {
 | 
	
		
			
				|  |  | -  white-space: pre-wrap!important;
 | 
	
		
			
				|  |  | +  white-space: pre-wrap !important;
 | 
	
		
			
				|  |  |    line-height: normal !important;
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  |  .quill-img {
 |