关于富文本编辑器ckeditor在前后端分离项目中的使用

最新推荐文章于 2022-03-08 11:00:07 发布

pichunhan

最新推荐文章于 2022-03-08 11:00:07 发布

阅读量2.4k

点赞数 1

分类专栏：前端跨域文章标签：跨域 ckeditor 前后端分离

本文链接：https://blog.csdn.net/pichunhan/article/details/73188896

版权

前端同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

跨域

1 篇文章 0 订阅

订阅专栏

一.引入ckeditor,并初始化,这一点不用多说

二.图片上传:

图片上传需要自己配置后台请求路径;本文后台请求是自己写的,没有使用插件,而且前端页面与后台图片上传地址域名不一致.导致最原始的DEMO永远无法解决上传图片之后回显的跨域问题.

最后设置:

config.filebrowserUploadUrl="http://192.168.30.242:2225/ckeditor/uploadImg?backUrl=http://127.0.0.1:8020/party-construction-page/dangjian2/getFile.html";

使用backUrl参数回调,并在页面同级域名下添加getFile.HTML页面;

下面是后台代码

@RequestMapping(value = "/uploadImg")
    public void upload(HttpServletRequest request, HttpServletResponse response,
            @RequestParam("upload") MultipartFile multipartFile)
            throws IOException
    {
        response.setContentType("text/html; charset=UTF-8");
        response.setHeader("Cache-Control", "no-cache");
        logger.info("imag uploading");
        String path = this.uploadDir + "/";
        String suffix = multipartFile.getOriginalFilename().substring(multipartFile.getOriginalFilename().lastIndexOf(".")).toLowerCase();
        String fileName = "image" + "/"
                + DateTools.dateToString(new Date(),
                        DateFormatString.yyyy_MM_dd)
                + "/" + System.currentTimeMillis()
                + suffix;
        File targetFile = new File(path, fileName);
        if (!targetFile.getParentFile().exists())
        {
            targetFile.getParentFile().mkdirs();
        }
        try
        {
            multipartFile.transferTo(targetFile);
        } catch (Exception e)
        {
            logger.error(e);
        }
        String callback = request.getParameter("CKEditorFuncNum");
        String backUrl = request.getParameter("backUrl");
        String message = "";
        response.sendRedirect(backUrl+"?ImageUrl="+ this.imageRootUrl + fileName + "&Message=" + message + "&CKEditorFuncNum=" + callback); 
    }

getFile.HTML内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			function GetQueryString(name) {  
			    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");  
			    var r = window.location.search.substr(1).match(reg);  //获取url中"?"符后的字符串并正则匹配
			    var context = "";  
			    if (r != null)  
			         context = r[2];  
			    reg = null;  
			    r = null;  
			    return context == null || context == "" || context == "undefined" ? "" : context;  
			}
			window.parent.CKEDITOR.tools.callFunction(GetQueryString("CKEditorFuncNum"),GetQueryString("ImageUrl"),GetQueryString("Message"));
		</script>
	</body>
</html>

pichunhan

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
5
评论
关于富文本编辑器ckeditor在前后端分离项目中的使用

一.引入ckeditor,并初始化,这一点不用多说二.图片上传:图片上传需要自己配置后台请求路径;本文后台请求是自己写的,没有使用插件,而且前端页面与后台图片上传地址域名不一致.导致最原始的DEMO永远无法解决上传图片之后回显的跨域问题.最后设置:config.filebrowserUploadUrl="http://192.168.30.242:2225/ckeditor/uploa
复制链接

扫一扫