配置服务端接口

【注意】如果上传图片遇到问题,请打开浏览器开发者工具,查看 console.error 输出的错误信息。

配置接口

  1. const E = window.wangEditor
  2. const editor = new E('#div1')
  3. // 配置 server 接口地址
  4. editor.config.uploadImgServer = '/upload-img'
  5. editor.create()

配置完成之后,编辑器的图片菜单,会显示上传图片的 tab 和图标,如下图。

配置服务端接口 - 图1

server 接口返回格式,重要!!!

接口要返回 application/json 格式,格式要求如下:

  1. {
  2. // errno 即错误代码,0 表示没有错误。
  3. // 如果有错误,errno != 0,可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
  4. "errno": 0,
  5. // data 是一个数组,返回图片Object,Object中包含需要包含url、alt和href三个属性,它们分别代表图片地址、图片文字说明和跳转链接,alt和href属性是可选的,可以不设置或设置为空字符串,需要注意的是url是一定要填的。
  6. "data": [
  7. {
  8. url: "图片地址",
  9. alt: "图片文字说明",
  10. href: "跳转链接"
  11. },
  12. {
  13. url: "图片地址1",
  14. alt: "图片文字说明1",
  15. href: "跳转链接1"
  16. },
  17. "……"
  18. ]
  19. }