首页 > 其他分享 >wangEditor 自定义上传图片

wangEditor 自定义上传图片

时间:2023-08-18 12:22:49浏览次数:39  
标签:const 自定义 wangEditor URL editor file 上传

//需要项目后台提供上传接口uploadFile  

下载接口FILE_URL:
Object.defineProperties(Vue.prototype, {
  FILE_URL: {
    value: function (fileId) {
      if (!fileId) {
        return
      }
      return (
        process.env.VUE_APP_REMOTE_URL +
        'mi' +
        '/api/v1/file/download' +
        toQueryString({ token: getToken(), fileId })
      )
    },
  },
})

---------------------------------------------------------------------------------------
this.editor = new E('#editor')
const this_ = this
// 自定义上传图片
this.editor.config.customUploadImg = async function (
  resultFiles,
  insertImgFn,
) {
  // resultFiles 是 input 中选中的文件列表
  // insertImgFn 是获取图片 url 后,插入到编辑器的方法
  const promises = resultFiles.map(file => {
    const formData = new FormData()
    formData.append('file', file)
    return uploadFile(formData)
  })
  const imgIds = await Promise.all(promises)
  const urls = imgIds.map(v => this_.FILE_URL(v))
  urls.forEach(v => {
    this_.editor.cmd.do(
      'insertHtml',
      '<img src="' + v + '" style="width:100%"/>',
    )
  })
}
this.editor.create()
this.editor.txt.html('') //设置内容

 

标签:const,自定义,wangEditor,URL,editor,file,上传
From: https://www.cnblogs.com/sclweb/p/17640175.html

相关文章

  • HTML5实现大文件上传
    ​ 文件夹数据库处理逻辑public class DbFolder{    JSONObjectroot;       public DbFolder()    {        this.root= new JSONObject();        this.root.put("f_id", "");        this.root.put("f_nameLoc", "......
  • 黑魂235 自定义playable
    首先去Unity官网下载这个CustomPlayable的免费素材。然后导入工程项目里。在Director物体里可以导入新的Track轨。 ......
  • WPF利用依赖属性和命令编写自定义控件
    以实例讲解(大部分讲解在代码中)1,新建一个WPF项目,添加一个用户控件之后在用户控件里面添加几个控件用作测试,12345678910111213141516171819<UserControlx:Class="SelfControlDenpendy.SelfControl"             xmlns="http://schem......
  • golang Gin框架 自定义日志形式
    funcmain(){ router:=gin.New() //LoggerWithFormattermiddlewarewillwritethelogstogin.DefaultWriter //Bydefaultgin.DefaultWriter=os.Stdout router.Use(gin.LoggerWithFormatter(func(paramgin.LogFormatterParams)string{ //yourcustomfo......
  • WPF --- 非Button自定义控件实现点击功能
    引言今天在做一个设置文件夹路径的功能,就是一个文本框,加个按钮,点击按钮,弹出FolderBrowserDialog再选择文件夹路径,简单做法,可以直接StackPanel横向放置一个TextBox和一个ImageButton,然后点击按钮在后台代码中给ViewModel的FilePath赋值。但是这样属实不够优雅,UI不够......
  • vue3 文件上传进度条组件
    index.vue文件<template><divclass="confirm-modal"><transitionname="fade"><divclass="modal-dialog"@click="clickMaskToClose?handleCancel():null"v-if="visible"@tou......
  • Python实现自定义请求头消息headers
    使用python爬虫爬取数据的时候,经常会遇到一些网站的反爬虫措施,一般就是针对于headers中的User-Agent,如果没有对headers进行设置,User-Agent会声明自己是python脚本,而如果网站有反爬虫的想法的话,必然会拒绝这样的连接。而修改headers可以将自己的爬虫脚本伪装成浏览器的正常访问,来......
  • 为远程群晖NAS的自定义域名免费申请SSL证书
    概述ERP系统对于企业来说重要性不言而喻,不管是财务、生产、销售还是采购,都需要用到ERP系统来协助。但ERP中这些重要数据属于企业机密文档,往往需要本地化管理,只能部署在企业内网之下。有时候我们会遇到在外需要远程登录ERP临时处理紧急事务,我们可以通过内网穿透来解决,将ERP服务端端......
  • mybatis自定义拦截器@Intercepts
    mybatis:自定义实现拦截器插件Interceptor-知乎(zhihu.com) 11.插件机制Interceptor|一灰灰Learning(hhui.top)......
  • Kettle中调用用户自定义的jar包
     ETL工具断断续续的也接触了Informatica,Kettle,SSIS,个人感觉Info很强大但是也很贵,而且有着一些神秘感。Kettle4.0版本以来已经有了User  definedjavaclass组件,使用户可以写Java代码让kettle来调用,这就说明了很多kettle不能处理的东西我们可以通过Java代码来实现,步骤如......