Vue-Quill-Editor + Element 实现富文本自定义上传图片和视频

Vue-Quill-Editor 富文本编辑器和 Element-ui 的安装和使用各大博客论坛已经有很多这里不多提。

图片上传:

Vue-Quill-Editor 上传图片默认转换成base64的形式,存储在数据库里会很长,于是使用文件上传服务器的路径来存储。


data() {
    return {
      //图片url
      urlList: [],
      //正文
      content: "",
      //富文本配置
      editorOption: {
        placeholder: "正文内容支持上传图片和视频",
        theme: "snow",
        modules: {
          toolbar: {
            container: toolbarOptions,     //自定义工具栏,略
            handlers: {
              image: function (value) {    //替换原图片上传功能
                if (value) {
                  document.querySelector(".quill-picture-uploader input").click(); //核心
                } else {
                  this.quill.format("image", false);
                }
              },
            }
          },
        },
      },
    };
  },

F12查看一个 element-upload 组件可以看到它的结构是这样的。querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素,具体用法可以百度了解。这句代码的意思就是触发指定类名元素下,input元素的点击事件,达到点击编辑器里的图片上传按钮,却触发 element-upload 上传方法的效果。

//上传图片之前校验
bfUpload(file) {
    console.log(file)
    if ("image/png" == file.type || "image/jpeg" == file.type) {
    } else {
        this.$message.error('图片插入失败,请检查文件格式');
        return;
    }
},
//正文插入图片上传成功调用
uploadSuccess(response, file, fileList) {
    this.urlList.push(response.url);
    let quill = this.$refs.myQuillEditor.quill;
    if (response.url != null) {
        //获取光标所在位置
        let length = quill.getSelection().index;
        //插入图片
        quill.insertEmbed(length, 'image', response.url);
        //移动光标到图片后
        quill.setSelection(length + 1);
    }
},

效果图:

Vue-Quill-Editor + Element 实现富文本自定义上传图片和视频_第1张图片

 

视频上传:

Vue-Quill-Editor 上传视频时输入对应的URL,会转换成 iframe 标签存储,所以不必更改默认设置,只需提供一个视频上传接口(如果需要实现点击直接上传效果,参考图片上传)。代码来自:https://www.cnblogs.com/1312mn/p/11233395.html


                //封装的组件


                    
                    

你可能感兴趣的:(前端相关,vue,javascript,html)