ueditor1_4_3-utf8-jsp版使用配置-优快云博客

本文链接：https://blog.youkuaiyun.com/code_zjw/article/details/39005921

本文档详细介绍了ueditor1_4_3-utf8-jsp版的使用配置步骤，包括下载编辑器资源，将必要的jar包引入项目，新建jsp页面并引入js文件，设置图片上传路径及后台参数配置，以及提供后台controller的初始化代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.下载

http://ueditor.baidu.com/website/

2.将根目录下jsp/lib中的jar包添加到自己的项目中,主要是 ueditor-1.1.1.jar

3.新建jsp页面,引入3个js文件

<script type="text/javascript" src="${pageContext.request.contextPath }/ueditor/ueditor.config.js"></script> <!-- 这个文件在前面-->
<script type="text/javascript" src="${pageContext.request.contextPath }/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/ueditor/lang/zh-cn/zh-cn.js"></script>

4.参数配置

1)配置图片上传路径,对应后台控制器

ueditor.config.js文件中配置:serverUrl: URL + "jsp/imageUpload.do"

此处最好加上前缀jsp,因为config.json的未知是在jsp中的.

2)后台参数配置

jsp/config.json文件中参数配置

    "imageActionName": "uploadimage", /* 执行上传图片的action名称 ,<span style="color:#FF0000;">最好不要变</span>*/
    "imageFieldName": "upfile", /* 提交的图片表单名称 */
    "imageMaxSize": 2048000, /* 上传大小限制，单位B */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
    "imageCompressEnable": true, /* 是否压缩图片,默认是true */
    "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
    "imageInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageUrlPrefix": "/<span style="color:#FF0000;">projectname</span>", /* 图片访问路径前缀 项目名称 */
    "imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}_filename", /*  上传保存路径,可以自定义保存路径和文件名格式 */

此处仅仅是上传图片参数

5.后台controller代码,此处仅仅是初始化

@Controller
@RequestMapping("/ueditor/jsp")
public class UEditController {
	
	@RequestMapping("/imageUpload.do")
	public void imageUpload(HttpServletRequest request,HttpServletResponse response) throws IOException{
		request.setCharacterEncoding( "utf-8" );
		response.setHeader("Content-Type" , "text/html");
		String rootPath = request.getServletContext().getRealPath("/");
                String string = new ActionEnter( request, rootPath ).exec();//直接调用即可,同controller.jsp
		response.getWriter().write( string );
	}
}

6.得到编辑器实例并且提交表单

<form action="jsp/saveData.do" method="post">
		<script type="text/plain" id="editor" name="content" style="width:1024px;height:500px;"></script>
		<input type="submit" value="提交"/>
	</form>
	
	<script type="text/javascript">
	 var ue = UE.getEditor('editor');
	</script>