看到CSDN都在用wangeditor而且用起来的确简单,可是图片上传还是一直搞不定。

1.返回格式问题

官方要求返回json格式,先定义字典赋值,然后采用json.dumps(result,ensure_ascii=False)进行后端返回:

{"errno": 0,"data": ["图片1地址","图片2地址","……"]
}

2.request.files['myFile']问题

由于3.0以上没有textarea,只有div。找了半天才找到在前端进行命名即可。

editor.customConfig.uploadFileName = 'myFile'

还需要解决的问题:

1.从磁盘里复制、然后粘贴到文本框里,自动上传图片。

2.从微信、QQ等复制粘贴到文本框里,自动上传。

3.截图形成的base64,直接粘贴自动上传。

4.从word里复制粘贴的图片。

附完整代码python-flask版:

def uploadfile():result={}file = request.files['myFile']if file == None:result['error']='1'result['data']=['图片地址']print(result)return json.dumps(result,ensure_ascii=False)else:if file and file.filename:filename = file.filenamefilepath = os.path.join(app.static_folder, 'files', filename)file.save(filepath)imgUrl = url_for('static', filename='%s/%s' % ('files',filename))result['error']=0result['data'] = imgUrlprint(result)return json.dumps(result,ensure_ascii=False)

wangeditor富文本编辑器的一些坑相关推荐

  1. wangeditor富文本编辑器集成配置

    wangeditor富文本编辑器集成 <!DOCTYPE html> <html><head><meta charset="utf-8"& ...

  2. 更加简洁易用——wangEditor富文本编辑器新版本发布

    1. 前言 wangEditor富文本编辑器(www.wangEditor.com)从去年11月份发布,至今已经有将近10各月了.它就像一个襁褓中的小婴儿,在我的努力以及众多使用者的支持下不断摸索.成 ...

  3. css wangeditor 修改_内容复制到wangEditor富文本编辑器样式排版错误重置方法

    从网站或者其他地方复制内容到wangEditor富文本编辑器样式排版错误解决方案 从网站或者其他地方复制内容到wangEditor富文本编辑器样式排版错误,粘贴到wangEditor时鼠标右击选择&q ...

  4. 集成wangEditor富文本编辑器

    以下是JavaWeb项目集成wangEditor富文本编辑器,wangEditor是一个轻量级的富文本编辑器,优点是:集成速度快,容易上手.缺点是:相对于百度Ue功能较少,不过也基本满足了我们所需的功 ...

  5. wangEditor富文本编辑器使用、编辑器内容转json格式

    wangEditor富文本编辑器好处:可以吧文本编辑器中的内容转成json格式,方便app.小程序使用 wangEditor官网 wangEditor官方文档 wangEditor官方下载 下载好之后 ...

  6. 「newbee-mall新蜂商城开源啦」 页面优化,最新版 wangEditor 富文本编辑器整合案例...

    在开源项目达到一定规模时,社区就会给出非常多的反馈,想要开源保持长久的生命力和正向的影响力,定期维护和更新是十分必要的.同时,从另一个角度来说,这也是对该开源项目使用者负责. 1 新蜂商城开源项目的重 ...

  7. wangEditor 富文本编辑器使用

    wangEditor 富文本编辑器使用 框架: react hooks 链接: 官方文档参考 富文本编辑器组件 import '@wangeditor/editor/dist/css/style.cs ...

  8. react html编辑器,wangEditor富文本编辑器+react+antd的使用

    搜索热词 1.github上发现富文本编辑器: 2.结合react+antd的具体使用: 案例使用场景:MyModal为弹窗,弹窗显示 编辑名称及描述.描述使用wangeditor富文本编辑器实现. ...

  9. wangeditor富文本编辑器上传图片以及跨域问题解决

    一.简介 wangeditor富文本编辑器是由js和css开发的富文本编辑器,轻量.简洁.高效 详细信息可以查看官网:http://www.wangeditor.com/ 二.上传图片 本章内容主要讲 ...

最新文章

  1. 转:马云语录之公司请你来干嘛
  2. 产品观,来自微信张小龙的
  3. linux ip addr peer,Linux网络IP设置
  4. 一分钟理清Mysql的锁类型——《深究Mysql锁》
  5. python的if语句例句_Python入门之if条件语句
  6. react打包后图片丢失_使用 webpack 搭建 React 项目
  7. 记一次win10下pycharm用tensorboard可视化不显示的问题解决
  8. Flink SQL 功能解密系列 —— 流式 TopN 挑战与实现
  9. linux创建网络ntfs接点,Linux系统下挂接ntfs盘时总提示module fuse not found如何解决?...
  10. Oracle_linux_lesson_p2
  11. 拦截游戏窗口被移动_非常简单实用的有效阻止您的电脑弹窗-拦截不受欢迎的弹窗...
  12. 深入学习c++(虚函数遇到析构函数就退化了)
  13. ASP.NET数据分页技术(4)
  14. 除了PS,这几款设计软件也是我的最爱
  15. 有用但用处不多的html的属性
  16. Tomcat中 appBase和docBase配置及默认管理页面
  17. 怎样锁定计算机本地磁盘,win7系统本地磁盘加密的操作方法
  18. 原生js编写的todos
  19. React Native学习资源汇总
  20. Block Recurrent Transformer:结合了LSTM和Transformer优点的强大模型

热门文章

  1. The file Tomcat8.exe was not found... Either the CATALINA_HOME environment variable is not defined c
  2. OpenWRT上安装FreeSWITCH
  3. App图标不显示:Xcode项目在Xcode9中运行会出现AppIcon不显示的 BUG
  4. PCL 改进体元滤波算法
  5. 微信报名怎么做_分享微信公众号搭建报名系统步骤
  6. 借船过河:一个据说能看穿你的人性和欲望的心理测试
  7. python 递增递减数列
  8. TIA博途WINCC中,触摸屏误操作跳过START界面的处理办法
  9. linux终端命令大全
  10. 比较好用的两个IP定位网站