Ueditor富文本编辑器是在很多项目里经常用到的框架,是百度开发团队开发的一款很好用的富文本编辑器

 

下面就是我在一个系统里用到的,有了富文本编辑器,管理员使用起来不是很方便?

所以本博客介绍这个富文本编辑器的使用哈!觉得写得不错的请点赞哈,有建议欢迎提哈!^V^

 

旅游自助系统项目之百度富文本编辑器使用_框架

 

下载链接:​​http://ueditor.baidu.com/website/download.html​

具体的使用请看官网:​​http://ueditor.baidu.com/website/index.html​

 

下载富文本编辑器后,我们打开MyEclipse或者其它编辑软件,选择file->import,选择文件系统,导入下载好的Ueditor

旅游自助系统项目之百度富文本编辑器使用_html_02

然后启动tomcat服务器

  ​​ http://localhost:8080/项目名称t/ueditor1_4_3_2/jsp/controller.jsp?action=config​

这个要根据你的项目进行修改的哈

可以输出这个,什么编辑器导入成功

旅游自助系统项目之百度富文本编辑器使用_富文本编辑器_03

 

引入js,charset属性设置为UTF-8的,因为我的系统默认是UTF-8的

<span style="font-size:18px;"><script type="text/javascript" charset="UTF-8" src="<%=basePath %>ueditor1_4_3_2/ueditor.config.js"></script>
<script type="text/javascript" charset="UTF-8" src="<%=basePath %>ueditor1_4_3_2/ueditor.all.min.js"> </script></span>

 

复制ueditor里面的index,html代码,这个要根据需要去复制的

 

<span style="font-size:18px;"><script type="text/javascript">

//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('editor');



function getContent() {
var arr = [];
arr.push("使用editor.getContent()方法可以获得编辑器的内容");
arr.push("内容为:");
arr.push(UE.getEditor('editor').getContent());
alert(arr.join("\n"));
}


</script></span>

 

 

 

 

因为我做的系统只要实现将编辑的文本和样式一起写入数据库,所以只要使用getContext方法就可以

 

在form表单里加入:

<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>

 

注意这些属性都不用随便修改的哦

 

获取文本和文本样式的参考代码,

 

String introduction = new String(request.getParameter("editorValue").getBytes("iso-8859-1"),"UTF-8");
  这个就是获取文本和文本样式的代码,然后下面的代码只是参考的,只要用String introduction = new String(request.getParameter("editorValue").getBytes("iso-8859-1"),"UTF-8");
  这代码就可以获取内容

 

public class AddSpotInfoServlet extends HttpServlet {

/**
*
*/
private static final long serialVersionUID = 1L;

/**
*
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
request.setCharacterEncoding("UTF-8");

String introduction = new String(request.getParameter("editorValue").getBytes("iso-8859-1"),"UTF-8");
String picture = Constant.ImgPath.path;
String position = new String(request.getParameter("position").getBytes("iso-8859-1"),"UTF-8");
String priceString = new String(request.getParameter("price").getBytes("iso-8859-1"),"UTF-8");
Double price = Double.parseDouble(priceString);
String sortString = new String(request.getParameter("sort").getBytes("iso-8859-1"),"UTF-8");
int spot_sort = Integer.parseInt(sortString);
// String timeString = new String(request.getParameter("time").getBytes("iso-8859-1"),"UTF-8");
// Date time = Date.valueOf(timeString);
String tour_project = new String(request.getParameter("tour_project").getBytes("iso-8859-1"),"UTF-8");

Spot spot = new Spot();
spot.setIntroduction(introduction);
spot.setPicture(picture);
spot.setPosition(position);
spot.setPrice(price);
spot.setSpot_sort(spot_sort);
spot.setTour_project(tour_project);

SpotDAO spotDao = new SpotDAOImpl();
boolean flag = spotDao.addInfo(spot);
if(flag){
response.sendRedirect(Constant.WEB_URL_SPOT_SERVLET);
}

out.flush();
out.close();
}

/**
*
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}

}

ok,可以将文本和样式一起写入数据库了,哈哈哈,^V^

旅游自助系统项目之百度富文本编辑器使用_框架_04