[转]百度Ueditor的基本配置和照片的上传
最近领导指派个任务,要使用ueditor上传图片,第一次不会用,发现以下这篇博客比较适合初次使用的人,故转载
原文地址:http://blog.****.net/shaochong047/article/details/52673648?locationNum=13
原文作者:http://blog.****.net/shaochong047
最近刚弄了百度富文本的基本使用,拿来跟大家分享一下。
1.下载,http://ueditor.baidu.com/website ,最正规的下载网站,百度一下,随处可见。
2.解压下载的文件
3.把这些东西都复制到你的工程的跟目录下,这里我以sts为例:
4.有的项目可能需要把最下方的几个jar包再导入一遍,不用介意,再重新导入一遍就是了。ueditor.all.js ueditor.config.js ,ueditor.parse.js, 这三个就够了。
5.直接打开index.html就可以使用神奇的ueditor了。(http://localhost:8080/工程名称/ueditor/index.html)
6.如果你想要上传图片,还要进行相关配置,先来看ueditor.js的配置,
注意画红的部分,尽量别写错了。
7.然后就是config.json的配置,这里才是重头戏,看仔细了。
千万注意以上的两个配置,记住了
8.配置完成,刷新或重启,就可以实现文件的上传了。
9.下面写一下自己的测试代码(主要是加强自己记忆)
update.jsp
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
- <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script type="text/javascript" src="ueditor/ueditor.config.js"></script>
- <script type="text/javascript" src="ueditor/ueditor.all.js"></script>
- <script type="text/javascript" src="ueditor/lang/zh-cn/zh-cn.js"></script>
- <title></title>
- <link rel="stylesheet" type="text/css" href="css/default.css" />
- <link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css" />
- <link rel="stylesheet" type="text/css" href="js/themes/default/icon.css" />
- <link rel="stylesheet" type="text/css" href="jqueryeasyui/themes/default/easyui.css"/>
- <link rel="stylesheet" type="text/css" href="jqueryeasyui/themes/icon.css"/>
- <link rel="stylesheet" type="text/css" href="jqueryeasyui/demo/demo.css"/>
- <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
- <script type="text/javascript" src="js/jquery.json-2.4.js"></script>
- <script type="text/javascript" src="js/json2.js"></script>
- <script type="text/javascript" src="js/jQuery.easyui.js"></script>
- <script type="text/javascript" src="jqueryeasyui/jquery.easyui.min.js"></script>
- <script type="text/javascript" src="jqueryeasyui/easyui-lang-zh_CN.js"></script>
- </head>
- <body>
- <div id="mainPanle" scrolling="no" region="center"
- style="background: #ffffff; overflow:hidden;width: 1100px; height: 630px;margin: 15px auto 0px auto;overflow: hidden;padding: 0px 0px 0px 0px;border:2px #ffffff solid;" >
- <div id="form" style="padding:3px auto 9px auto;margin:67px auto 9px auto;width:400px;border:solid 2px #91b5e7;height:300px;">
- <c:if test="${!empty error}">
- <c:out value="${error}" />
- </c:if>
- <script type="text/javascript">
- var editor = new baidu.editor.ui.Editor({
- toolbars:[['Spechars','Emotion','InsertImage','bold','Italic','ForeColor','FontFamily','FontSize',]],
- textarea:'content' });
- editor.render("editor");
- </script>
- <form action="<c:url value="addnews.html"/>" name="aname"
- style="padding: 3px auto 9px auto; margin: 67px auto 9px auto; width: 240px; border: solid 0px #91b5e7; height: 165px;"
- method="post" enctype="multipart/form-data">
- 主题:<input type="text" name="theme" placeholder="描述"><br />
- 模块:<input type="text" name="plate"></input> <br /> <script
- type="text/plain" id="editor" name="content"></script> <input
- type="submit" value="上传"> <input
- type="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 >
- <div id="clear"></div>
- </div><!--form-->
- </div><!--mainPanle-->
- <!--</div>end mainPanle1-->
- </body>
- </html>
- @RequestMapping(value="/addnews.html")
- @ResponseBody
- public String newsAdd(Core core,HttpServletRequest request) throws ServletException, Exception
- {
- System.out.print(123);
- // 获得表单传过来的几个数据
- String theme = core.getTheme();
- String content = core.getContent();
- int plate = core.getPlate();
- System.out.print(plate);
- String URL = request.getContextPath()+"/"+"ueditor/jsp";
- SimpleDateFormat format = new SimpleDateFormat("yyyyMMddHHmmss");
- Date newsDate =new Date();
- String date =format.format(newsDate);
- String imageURL = URL+"/upload/"+date+".jpg";
- Core core1 = new Core();
- core1.setTheme(theme);
- core1.setContent(content);
- core1.setPlate(plate);
- core1.setPicurl(imageURL);
- if (tryCatchCoreService.saveCore(core1)) {
- return returnStatus.Success;
- }
- else {
- return returnStatus.Fail;
- }
- }
暂时就是这样,加强记忆,也希望对大家有帮助。