ueditor 前后端分离+图片上传

最新推荐文章于 2024-09-06 14:46:37 发布

yszd2017

最新推荐文章于 2024-09-06 14:46:37 发布

阅读量6.8k

点赞数

分类专栏： java ueditor vue 文章标签： ueditor 前后端分离 springboot

本文链接：https://blog.csdn.net/yszd2017/article/details/79231774

版权

从一开始的学习Vue开始，到引用ueditor 图片上传产生了各种问题，在网上也到处搜索了解决办法，并结合自己的工程，整理在此记录以备后续学习；

1、前端：vue
2、后端：springBoot+gradle+ groovy
3、ueditor-1.12.jar 源码修改

1、前端：vue
vue 的项目构建具体就不详细介绍了，FengCms FungLeo 博客写的很详细， http://blog.csdn.net/fungleo/article/details/77575077
修改点：
（1）在ueditor.config.js 中添加 window.UEDITOR_HOME_URL 和
serverUrl

  window.UEDITOR_HOME_URL ="static/ue/";
  var serverUrl="http://127.0.0.1:8011/inner/test/upload";
  并修改,serverUrl:serverUrl

如下图所示
这里写图片描述

（2）ueditor.all.js 修改；ueditor 单文件上传使用的iframe 不支持跨域；改为ajax上传

在 simpleupload 处引用jquery

utils.loadFile(document,{
        src:me.options.UEDITOR_HOME_URL+"third-party/jquery-1.10.2.min.js",
        tag:"script",
        type:"text/javascript",
        defer:"defer"
      });
替换  domUtils.on(input, 'change', function(){
   })中内容如下：
 domUtils.on(input, 'change', function() {
   
          if(!input.value) return;
          var loadingId = 'loading_' + (+new Date()).toString(36);
          var imageActionUrl = me.getActionUrl(me.getOpt('imageActionName'));
          var allowFiles = me.getOpt('imageAllowFiles');

          me.focus();
          me