详解vue.js+UEditor集成[前后端分离项目]

首先，谈下这篇文章中的前后端所涉及到的技术框架内容。

成都创新互联公司专业为企业提供如皋网站建设、如皋做网站、如皋网站设计、如皋网站制作等企业网站建设、网页设计与制作、如皋企业网站模板建站服务，十余年如皋做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

虽然是后端的管理项目，但整体项目，是采用前后端分离的方式完成，这样做的目的也是产品化的需求；

前端，vue+vuex+vue router+webpack+elementUI的方案完成框架的搭建，其中用到了superUI来作为后端登陆之后的主页面框架，中间集成vue的大型单页应用；

后端，springboot+spring+springmvc+spring serurity+mybatis+maven+redis+dubbo

+zookeeper的方式来构建项目框架和管理，提供给前端restful风格的接口。此处还提供app端、PC WEB端的接口。

UEditor之前一直有在项目中使用，作为国内开源的富文本编辑器，有百度的强大技术支持，整体来说是不错的选择，百度也提供了php、asp、.net、jsp的版本。原有的项目是采用整体式的开发方式，采用的是jsp的页面开发技术，所以集成起来相对来说更加容易，只需要按照文档的方式将前端集成进去，然后后端拿到源码之后，针对文件上传的类修改最终存储的方法即可将文件等上传到本身的服务器了。

然而，由于决定了做前后端分离的方式，必然就会有新的坑，特别是还选择了新的技术vue.js+elementUI的这种方式。那么也只能放手一搏，不多啰嗦，介绍完，马上开始正事。

1、下载UEditor官网最新的jsp版本的包，下载完成解压之后得到一个ueditor1_4_3_3-utf8-jsp的文件夹，里面包含的内容如下：

详解vue.js+UEditor集成 [前后端分离项目]

除了jsp的文件夹之外，其余的文件和文件夹复制到前端项目中的static用于存放静态文件的目录下，结构如下：

详解vue.js+UEditor集成 [前后端分离项目]

这里特别说明jsp目录下的资源为何不放进来，因为我们是vue搭建的项目，jsp页面肯定是不会放在前端的项目中的，包括config.json也放在后端用于解析，这里后面会解释这样做的原因。

2、前端将文件放进来之后，暂时先这样，咱们来整理后端的东西。这里将jsp目录下的lib目中的ueditor.jar文件中的所有类全部拿出来（具体方式自己决定，反编译工具或者拿到源码都可以）,放到后端项目中，然后在control层新建一个UeditorController.java的类，如下：

/**
 * 用于处理关于ueditor插件相关的请求
 * @author Guoqing
 *
 */
@RestController
@CrossOrigin
@RequestMapping("/sys/ueditor")
public class UeditorController extends BaseController {

  @RequestMapping(value = "/exec")
  @ResponseBody
  public String exec(HttpServletRequest request) throws UnsupportedEncodingException{ 
    request.setCharacterEncoding("utf-8");
    String rootPath = request.getRealPath("/");
    return new ActionEnter( request, rootPath).exec();
  }
}

然后jsp目录下的config.json文件放到java/main/resources目录下，修改ConfigManager.java类，如下：

详解vue.js+UEditor集成 [前后端分离项目]

注释掉原有的读取配置文件的方式，添加新的读取路径，这样确保ueditor在初始化能够正确的加载配置文件。此时，修改前端项目中ueditor.config.js中的serverUrl的值为:

// 服务器统一请求接口路径
, serverUrl: http://localhost:8080/sys/ueditor/exec

而，针对ActionEnter.java类中，如下代码后的文件上传的处理，请大家针对自身的上传方式和文件服务器选择适合自己的方式：

switch ( actionCode ) {
      //读取配置文件时的请求处理
      case ActionMap.CONFIG:
        return this.configManager.getAllConfig().toString();
      //上传图片、视频、文件时的处理
      case ActionMap.UPLOAD_IMAGE:
      case ActionMap.UPLOAD_SCRAWL:
      case ActionMap.UPLOAD_VIDEO:
      case ActionMap.UPLOAD_FILE:
        conf = this.configManager.getConfig( actionCode );
        state = new Uploader( request, conf, baseFileService ).doExec();
        break;
       //抓取远程图片时的处理方式，此处也可以关闭

        //当从网页上复制内容到编辑器中，如果图片与该域名不同源，则会自动抓到本地的服务器保存 
      case ActionMap.CATCH_IMAGE:
        conf = configManager.getConfig( actionCode );
        String[] list = this.request.getParameterValues( (String)conf.get( "fieldName" ) );
        state = new ImageHunter( conf ).capture( list );
        break;
       //上传多文件时的文件在线管理
      case ActionMap.LIST_IMAGE:
      case ActionMap.LIST_FILE:
        conf = configManager.getConfig( actionCode );
        int start = this.getStartIndex();
        state = new FileManager( conf ).listFile( start );
        break;
        
    }
    return state.toJSONString();

最终的一步，写vue页面，插入ueditor组件，直接贴上源代码如下：

至此，大功告成，包括文件上传下载等部分全部搞定，不过要声明一点的是，当出现接口与页面部署域名不同时，点击选择图片上传会出现iframe跨域的问题。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。

本文题目：详解vue.js+UEditor集成[前后端分离项目]
网页链接：http://jkwzsj.com/article/gjdeij.html

详解vue.js+UEditor集成[前后端分离项目]

完整demo

其他资讯