vue富文本编辑器中上传图片

啊!!!好久没更新了,最近粉丝和访问量见长,正好有童鞋的项目遇到点问题,故出此文,

今天超哥给小伙伴带来的是vue中富文本编辑器上传的问题。

曾经写过一个文档管理的项目,用到最多的就是富文本编辑器。

说说遇到的坑吧:最终的提交结果,后端不要文档流,后端要上传成功返回的路径,不知道正在阅读此文的小伙伴是如何处理的,瞅着挺简单,但写起来还真有点麻烦,在这里以vue-quill-editor为例给大家演示。

首先安装,不用多说了吧,cnpm install vue-quill-editor -S

接着,引入依赖

import VueQuillEditor from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
Vue.use(VueQuillEditor)

先说一下实现过程吧,依赖element-ui,当然你可以想成你自己想要的上传插件,或者有大神可以直接new FormData()也是可以的。用白话文讲就是把插件中的图片按钮用el-upload覆盖,就这么简单。具体实现过程请继续往下看。

在所需的vue文件中

首先看DOM层,只需两个标签即可(quill-editor,el-upload)

附代码:

    
    
    
    

写过vue的相信el-upload大家都不陌生,在这里就不一一介绍各个属性了,而quill-editor这里超哥直接附上传送门vue-quill-editor - npm

数据层,附代码:

fileUpload:{   //附件上传
        file:null
      },
serverUrl: 'http://********',//上传图片的地址
editorOption: {
        placeholder: '',
        theme: 'snow',
        modules: {
          toolbar: {
              container: toolbarOptions,  // 工具栏
              handlers: {
                  'image': function (value) {
                  if (value) {
                    document.querySelector('.avatar-uploader input').click()
                  } else {
                    this.quill.format('image', false);
                  }
                }
              }
          }
        }
      },

看到这里有的小伙伴可能看到了重点,toolbarOptions是哪里来的,不要急,这个东西就是所需配置的工具栏,当时我们项目有回显功能所以超哥单独给他摘出来了。

toolbarOptions.js附代码:

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        
  ['blockquote', 'code-block'],
  [{'header': 1}, {'header': 2}],               
  [{'list': 'ordered'}, {'list': 'bullet'}],
  [{'script': 'sub'}, {'script': 'super'}],      
  [{'indent': '-1'}, {'indent': '+1'}],         
  [{'direction': 'rtl'}],                         
  [{'size': ['small', false, 'large', 'huge']}], 
  [{'header': [1, 2, 3, 4, 5, 6, false]}],
  [{'color': []}, {'background': []}],          
  [{'font': []}],
  [{'align': []}],
  ['link', 'image', 'video'],
  ['clean']                                      
]
export default toolbarOptions

然后继续,逻辑层,附代码:

注:uploadSuccess为改写的重中之重。

    uploadError() {
        // loading动画消失
        this.quillUpdateImg = false
        this.$message.error('图片插入失败')
    },
    uploadSuccess(res, file){
      // 首先获取富文本编辑器的实例
      let quill = this.$refs.myQuillEditor.quill
      // 上传成功所执行
      if (res.code == 200 && res.data !== null) {
          // 获取光标所在位置
          let length = quill.getSelection().index;
          // 插入图片res为服务器返回的数据
          quill.insertEmbed(length, 'image', res.data)
          // 光标移动至文本末端
          quill.setSelection(length + 1)
      } else {
          this.$message.error('图片插入失败')
      }
      // loading动画消失
      this.quillUpdateImg = false
    },
    beforeUpload(file) {
      this.fileUpload.file=file;
        // 显示loading动画
        this.quillUpdateImg = true
    },
    handleEditorBlur () {},
    handleEditorFocus () {},
    //这个是当初做的个文字限制后来没用就注释了
    handleEditorChange (e) {
      /*this.textLen = e.text.length - 1;
      this.beyond = this.textLen - 350;
      if (this.textLen > 350) {
        this.info.evId = '';
      } else {
        this.info.evId = this.evList[0].evId;
      }*/
    },

到这里此工程其实就已经竣工,说简单也简单说复杂也复杂,全在自己的摸索和探讨。

有时候比较忙,顾不上一一回复,但是看到了就一定会回复,

各位小伙伴和童鞋有不明白的或者不会的依然可以留言...

依旧老样子,不喜勿喷,写给需要的人看,渣*请自觉绕道

你可能感兴趣的:(vue,elementUi)