Ueditor使用趟坑相关文章

参考文章：

1、vue集成ueditor的注意事项
2、在Vue2.0中集成UEditor 富文本编辑器
3、vue 集成 UEditor 富文本编辑器
4、UEditor文档
5、ueditor 后端配置项没有正常加载，上传插件不能正常使用！jsp版本

实际Vue2.0项目解决方案

1、按这篇文章完成基础集成
2、上文说到的，在ueditor.config.js中，对serverUrl进行配置：

// 服务器统一请求接口路径

,serverUrl: ``'[http://172.16.254.49:83/File/UEditor](http://172.16.254.49:83/File/UEditor)'` `//地址管你们后端要去` 

• 具体需要后台提供两个接口

• 接口条件：
  1）API名称相同的GET与POST两个接口；
  2）其中GET接口需要后台返回数据内容如下：

      /* 前后端通信相关的配置,注释只允许使用多行方式 */
      {
          /* 上传图片配置项 */
          "imageActionName": "uploadimage", /* 执行上传图片的action名称；任意字符串即可，但不能为空*/
          "imageFieldName": "upfile", /* 提交的图片表单名称 ；与后台上传图片的POST接口所需参数名称一致*/
          "imageMaxSize": 2048000, /* 上传大小限制，单位B */
          "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
          "imageCompressEnable": true, /* 是否压缩图片,默认是true */
          "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
          "imageInsertAlign": "none", /* 插入的图片浮动方式 */
          "imageUrlPrefix": "", /* 图片访问路径前缀 */
          "imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
       }
  

  注意：后台GET请求需要配置jsonp跨域内容

  3）其中POST接口需要跟后台沟通好，一般需要配置两个参数：

    一般需要返回两个值：
    {
        state: "SUCCESS",
        url: "http://123.123.123:8080/image/url"
    }
  

3、前端需要做的工作

• 后台上传成功图片未展示到ueditor可视区域时，

    需要检查image.js文件；
    搜索“if (json.state == 'SUCCESS') {”
    这里是后台返回值赋值前端的地方
    看字段名称是否一致；
  

• 图片展示为裂图时

    查看image.js
    搜索“getInsertList: function () {”
    查看“prefix = editor.getOpt('imageUrlPrefix');”
    可能是因为添加了图片前缀导致的图片加载失败，可改为“prefix = '';”