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

最新推荐文章于 2024-06-25 09:02:21 发布

月光下的猪

最新推荐文章于 2024-06-25 09:02:21 发布

阅读量2.5w

点赞数

分类专栏：分享文章标签：百度

本文链接：https://blog.csdn.net/shaochong047/article/details/52673648

版权

分享专栏收录该内容

27 篇文章 0 订阅

订阅专栏

最近刚弄了百度富文本的基本使用，拿来跟大家分享一下。

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;
				}
	}

这是自己的效果图，虽然很丑，但是成功了。

暂时就是这样，加强记忆，也希望对大家有帮助。

欢迎关注公众号 IT技术自查获取更多跟详细的IT情报

月光下的猪

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
百度Ueditor的基本配置和照片的上传

最近刚弄了百度富文本的基本使用，拿来跟大家分享一下。1.下载，http://ueditor.baidu.com/website ，最正规的下载网站，百度一下，随处可见。2.解压下载的文件
复制链接

扫一扫

专栏目录