百度Ueditor的基本配置和照片的上传

2024-10-13 20:17:35

1、下载，http://ueditor.baidu.com/website ，最正规的下载网站，百度一下，随处可见。

2、解压下载的文件

4、有的项目可能需要把最下方的几个jar包再导入一遍，不用介意，再重新导入一遍就是了。ueditor.all.js ueditor.config.js ,ueditor.parse.枣娣空郅js, 这三个就够了。

5、直接打开index.html就可以使用神奇的ueditor了。（http://localhost:8080/工程名称/ueditor/index.html)

6、如果你想要上传图片，还要进行相关配置，先来看ueditor.js的配置，注意画红的部分，尽量别写错了。

8、配置完成，刷新或重启，就可以实现文件的上传了。

9、下面写一下自己的测试代码钱砀渝测（主要是加强自己记忆）update.jsp[html]view plaincopy<岿滗欣橡!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%><%@tagliburi="http://java.sun.com/jsp/jstl/core"prefix="c"%><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><scripttype="text/javascript"src="ueditor/ueditor.config.js"></script><scripttype="text/javascript"src="ueditor/ueditor.all.js"></script><scripttype="text/javascript"src="ueditor/lang/zh-cn/zh-cn.js"></script><title></title><linkrel="stylesheet"type="text/css"href="css/default.css"/><linkrel="stylesheet"type="text/css"href="js/themes/default/easyui.css"/><linkrel="stylesheet"type="text/css"href="js/themes/default/icon.css"/><linkrel="stylesheet"type="text/css"href="jqueryeasyui/themes/default/easyui.css"/><linkrel="stylesheet"type="text/css"href="jqueryeasyui/themes/icon.css"/><linkrel="stylesheet"type="text/css"href="jqueryeasyui/demo/demo.css"/><scripttype="text/javascript"src="js/jquery-1.7.2.min.js"></script><scripttype="text/javascript"src="js/jquery.json-2.4.js"></script><scripttype="text/javascript"src="js/json2.js"></script><scripttype="text/javascript"src="js/jQuery.easyui.js"></script><scripttype="text/javascript"src="jqueryeasyui/jquery.easyui.min.js"></script><scripttype="text/javascript"src="jqueryeasyui/easyui-lang-zh_CN.js"></script></head><body><divid="mainPanle"scrolling="no"region="center"style="background:#ffffff;overflow:hidden;width:1100px;height:630px;margin:15pxauto0pxauto;overflow:hidden;padding:0px0px0px0px;border:2px#ffffffsolid;"><divid="form"style="padding:3pxauto9pxauto;margin:67pxauto9pxauto;width:400px;border:solid2px#91b5e7;height:300px;"><c:iftest="${!emptyerror}"><c:outvalue="${error}"/></c:if><scripttype="text/javascript">vareditor=newbaidu.editor.ui.Editor({toolbars:[['Spechars','Emotion','InsertImage','bold','Italic','ForeColor','FontFamily','FontSize',]],textarea:'content'});editor.render("editor");</script><formaction="<c:urlvalue="addnews.html"/>"name="aname"style="padding:3pxauto9pxauto;margin:67pxauto9pxauto;width:240px;border:solid0px#91b5e7;height:165px;"method="post"enctype="multipart/form-data">主题：<inputtype="text"name="theme"placeholder="描述"><br/>模块:<inputtype="text"name="plate"></input><br/><scripttype="text/plain"id="editor"name="content"></script><inputtype="submit"value="上传"><inputtype="reset"value="取消">备注：<br/>1.支持的文件格式是jpg/png/jpeg/gif<br/>2.文件大小应小于1M<br/>3.请不要上传与版权/名誉相关的图片<br/><br/><p></p><hr></hr><p><p><p><p><p></p></p></p></p></p></form><div><divid="clear"></div></div></div></body></html>后台接受代码：[html]view plaincopy@RequestMapping(value="/addnews.html")@ResponseBodypublicStringnewsAdd(Corecore,HttpServletRequestrequest)throwsServletException,Exception{System.out.print(123);//获得表单传过来的几个数据Stringtheme=core.getTheme();Stringcontent=core.getContent();intplate=core.getPlate();System.out.print(plate);StringURL=request.getContextPath()+"/"+"ueditor/jsp";SimpleDateFormatformat=newSimpleDateFormat("yyyyMMddHHmmss");DatenewsDate=newDate();Stringdate=format.format(newsDate);StringimageURL=URL+"/upload/"+date+".jpg";Corecore1=newCore();core1.setTheme(theme);core1.setContent(content);core1.setPlate(plate);core1.setPicurl(imageURL);if(tryCatchCoreService.saveCore(core1)){returnreturnStatus.Success;}else{returnreturnStatus.Fail;}}这是自己的效果图，虽然很丑，但是成功了。暂时就是这样，加强记忆，也希望对大家有帮助。