当springboot应用为后端及vue应用为前端时ueditor编辑器的接入方法

青菜萝卜丁

2019-03-01

环境说明

springboot应用使用了docker化部署
vue应用与springboot应用为两个不同域名下的服务

对ueditor组件化处理

放置ueditor资源

这里以ueditor-jsp为例,下载ueditor-jsp-1.4.3.3-utf-8

将代码包解压放置在vue项目的static/ueditor下

ueditor组件化

在components新建ueditor目录存放代码index.vue
代码内容:

<template>
  <script 
    :id="id" 
    type="text/plain"/>
</template>

<script>
import "@/../static/ueditor/ueditor.config.js";
import "@/../static/ueditor/ueditor.all.min.js";
import "@/../static/ueditor/lang/zh-cn/zh-cn.js";
import "@/../static/ueditor/ueditor.parse.min.js";

export default {
  name: "UE",
  props: {
    content: {
      type: String,
      default: ""
    },
    ueconfig: {
      type: Object
    },
    id: {
      type: String
    }
  },
  data() {
    return {
      editor: null
    };
  },
  mounted() {
    const _this = this;
    _this.editor = UE.getEditor(_this.id, _this.ueconfig); // 初始化UE
    _this.editor.addListener("ready", function() {
      _this.editor.setContent(_this.content); // 确保UE加载完成后，放入内容。
    });
  },
  destroyed() {
    this.editor.destroy();
  },
  methods: {
    getContentTxt() {
      // 获取内容方法 原 getContent()
      return this.editor.getContentTxt();
    }
  },
};
</script>

ueditor配置(ueditor.config.js)

根据实际情况修改内容,如

//ueditor资源路径
window.UEDITOR_HOME_URL = "static/ueditor/";

window.UEDITOR_CONFIG = {
UEDITOR_HOME_URL: URL,
//后端地址
serverUrl: "https://api.server.domain/common/ueditor",
toolbars:[]

...
...

}

这个文件(ueditor.config.js)也可以不变动，在后面使用组件的时候配置参数也行

ueditor组件的使用方法

使用

<ueditor 
ref="ue" 
:content="content" 
:ueconfig="ueconfig" 
:id="'ueditor-1'"/>

导入

<script>
	import ueditor from "@/components/ueditor/index";
	export default{
		data () {
			return {
				content:"",
				//该参数实际就是(ueditor.config.js)中window.UEDITOR_CONFIG的内容
				ueconfig: {
			        UEDITOR_HOME_URL: "static/ueditor/",
			        serverUrl: process.env.BACK_API + "/common/ueditor",
			        initialFrameWidth: "auto",
			        initialFrameHeight: 300,
			        wordCount: false, 
			        toolbars: [[
			            'fullscreen', 'source', '|', 'undo', 'redo', '|',
			            'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
			            'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
			            'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
			            'directionalityltr', 'directionalityrtl', 'indent', '|',
			            'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
			            'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
			            /*'simpleupload',*/'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
			            'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
			            'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
			            'print', 'preview', 'searchreplace', 'drafts', 'help'
			        ]]

			    }
			}
		},
		methods:{
			getUEContent: function() {
				return this.$refs.ue.getContentTxt()
			}
		}
	}
</script>

pringboot-java接入

下载java上传代码

该java源码从ueditor-jsp代码包中jsp/lib/ueditor-1.1.2.jar文件转换得来，为了可以方便更改一些东西。
下载ueditor-java并解压放置在src/main目录下

增加maven依赖

<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.5</version>
</dependency>
<dependency>
    <groupId>commons-codec</groupId>
    <artifactId>commons-codec</artifactId>
    <version>1.11</version>
</dependency>
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.1</version>
</dependency>
<dependency>
    <groupId>org.json</groupId>
    <artifactId>json</artifactId>
    <version>20170516</version>
</dependency>

增加配置文件config.json

因为springboot使用了docker部署，所以将config.json放在了src/main/resources/config.json,内容为ueditor的上传配置，如:
根据你具体的情况主要更改UrlPrefix及PathFormat等

/* 前后端通信相关的配置,注释只允许使用多行方式 */
{
  /* 上传图片配置项 */
  "basePath":"/uploads",/* 上传文件的基本路径 */
  "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
  "imageFieldName": "upfile", /* 提交的图片表单名称 */
  "imageMaxSize": 2048000, /* 上传大小限制，单位B */
  "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
  "imageCompressEnable": true, /* 是否压缩图片,默认是true */
  "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
  "imageInsertAlign": "none", /* 插入的图片浮动方式 */
  "imageUrlPrefix": "https://api.server.domain/files", /* 图片访问路径前缀 */
  "imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
  /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
  /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
  /* {time} 会替换成时间戳 */
  /* {yyyy} 会替换成四位年份 */
  /* {yy} 会替换成两位年份 */
  /* {mm} 会替换成两位月份 */
  /* {dd} 会替换成两位日期 */
  /* {hh} 会替换成两位小时 */
  /* {ii} 会替换成两位分钟 */
  /* {ss} 会替换成两位秒 */
  /* 非法字符 \ : * ? " < > | */
  /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */

  /* 涂鸦图片上传配置项 */
  "scrawlActionName": "uploadscrawl", /* 执行上传涂鸦的action名称 */
  "scrawlFieldName": "upfile", /* 提交的图片表单名称 */
  "scrawlPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
  "scrawlMaxSize": 2048000, /* 上传大小限制，单位B */
  "scrawlUrlPrefix": "https://api.server.domain/files", /* 图片访问路径前缀 */
  "scrawlInsertAlign": "none",

  /* 截图工具上传 */
  "snapscreenActionName": "uploadimage", /* 执行上传截图的action名称 */
  "snapscreenPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
  "snapscreenUrlPrefix": "https://api.server.domain/files", /* 图片访问路径前缀 */
  "snapscreenInsertAlign": "none", /* 插入的图片浮动方式 */

  /* 抓取远程图片配置 */
  "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
  "catcherActionName": "catchimage", /* 执行抓取远程图片的action名称 */
  "catcherFieldName": "source", /* 提交的图片列表表单名称 */
  "catcherPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
  "catcherUrlPrefix": "https://api.server.domain", /* 图片访问路径前缀 */
  "catcherMaxSize": 2048000, /* 上传大小限制，单位B */
  "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 抓取图片格式显示 */

  /* 上传视频配置 */
  "videoActionName": "uploadvideo", /* 执行上传视频的action名称 */
  "videoFieldName": "upfile", /* 提交的视频表单名称 */
  "videoPathFormat": "/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
  "videoUrlPrefix": "https://api.server.domain/files", /* 视频访问路径前缀 */
  "videoMaxSize": 102400000, /* 上传大小限制，单位B，默认100MB */
  "videoAllowFiles": [
    ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
    ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上传视频格式显示 */

  /* 上传文件配置 */
  "fileActionName": "uploadfile", /* controller里,执行上传视频的action名称 */
  "fileFieldName": "upfile", /* 提交的文件表单名称 */
  "filePathFormat": "/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
  "fileUrlPrefix": "https://api.server.domain/files", /* 文件访问路径前缀 */
  "fileMaxSize": 51200000, /* 上传大小限制，单位B，默认50MB */
  "fileAllowFiles": [
    ".png", ".jpg", ".jpeg", ".gif", ".bmp",
    ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
    ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
    ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
    ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
  ], /* 上传文件格式显示 */

  /* 列出指定目录下的图片 */
  "imageManagerActionName": "listimage", /* 执行图片管理的action名称 */
  "imageManagerListPath": "/ueditor/jsp/upload/image/", /* 指定要列出图片的目录 */
  "imageManagerListSize": 20, /* 每次列出文件数量 */
  "imageManagerUrlPrefix": "https://api.server.domain/files", /* 图片访问路径前缀 */
  "imageManagerInsertAlign": "none", /* 插入的图片浮动方式 */
  "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的文件类型 */

  /* 列出指定目录下的文件 */
  "fileManagerActionName": "listfile", /* 执行文件管理的action名称 */
  "fileManagerListPath": "/ueditor/jsp/upload/file/", /* 指定要列出文件的目录 */
  "fileManagerUrlPrefix": "https://api.server.domain/files", /* 文件访问路径前缀 */
  "fileManagerListSize": 20, /* 每次列出文件数量 */
  "fileManagerAllowFiles": [
    ".png", ".jpg", ".jpeg", ".gif", ".bmp",
    ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
    ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
    ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
    ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
  ] /* 列出的文件类型 */

}

功能调用

在控制器类中增加一个方法用于和ueditor交互
如:

@RequestMapping(value = "/ueditor")
public void ueditor(@Context HttpServletRequest request, @Context HttpServletResponse response) throws IOException {
    request.setCharacterEncoding("utf-8");
    response.setHeader("Content-Type", "text/html");
    ServletContext application = request.getServletContext();
    String rootPath = System.getProperty("user.dir") + "files/";
    PrintWriter out = response.getWriter();
    out.write(new ActionEnter(request, rootPath).exec());
}

遇到的某些问题

1.返回的url路径不对

检查上传路径及url映射规则

2.在springboot中上传多图时，提示[未找到上传数据]

可使用下面的方式绕过springboot的自动管理,新建一个控制器类UEditorController

package com.company.api.controller;
import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.baidu.ueditor.ActionEnter;

@WebServlet(name = "UEditorServlet", urlPatterns = "/common/ueditor")
public class UEditorController extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");

        String action = request.getParameter("action");
        response.setHeader("Content-Type", "text/html;charset=utf-8");

        PrintWriter out = response.getWriter();
        String rootPath = System.getProperty("user.dir") + "files/";
        System.out.println(rootPath);

        String result = new ActionEnter(request, rootPath).exec();
        if (action != null &&
                (action.equals("listfile") || action.equals("listimage"))) {
            rootPath = rootPath.replace("\\", "/");
            result = result.replaceAll(rootPath, "/");
        }
        out.write(result);
    }
}

3.跨域模式下，单图上传模式失败

除开配置错误问题，在跨域模式下单图上传模式simpleupload将提示上传错误,
实际上图片已经上传成功并返回数据信息。

排查到文件ueditor.all.js的b && b(c.getLang("simpleupload.loadError"))代码段附近，
如果去掉try catch结构或者上面增加一行console.log(j);,
将打印具体的错误信息如:Blocked a frame with origin "https://api.server.domain" from accessing a cross。

没有较好的解决方式，如果都在同域环境下是没有问题的。
复杂点的解决方法可以是专门对该接口进行中间件反向代理的方式来处理,
比如将原来[浏览器->api服务]的流程更改为[浏览器->中间件反向代理转发->api服务]