美文网首页
Ueditor使用趟坑相关文章

Ueditor使用趟坑相关文章

作者: 罗小耳 | 来源:发表于2018-11-21 11:29 被阅读29次

    参考文章:

    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 = '';”
      

    相关文章

      网友评论

          本文标题:Ueditor使用趟坑相关文章

          本文链接:https://www.haomeiwen.com/subject/dpmqqqtx.html