WEB项目中使用UEditor(富文本编辑器)

Posted 2020-09-21 求知若渴 虚心若愚

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

 

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

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

 

 

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

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

 

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

然后启动tomcat服务器

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

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

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

 

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

[html] view plain copy

 

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

 

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

 

[html] view plain copy

 

1. <span style="font-size:18px;"><script type="text/javascript">  
2.   
3.     //实例化编辑器  
4.     //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor(‘editor‘)就能拿到相关的实例  
5.     var ue = UE.getEditor(‘editor‘);  
6.   
7.   
8.     
9.     function getContent() {  
10.         var arr = [];  
11.         arr.push("使用editor.getContent()方法可以获得编辑器的内容");  
12.         arr.push("内容为：");  
13.         arr.push(UE.getEditor(‘editor‘).getContent());  
14.         alert(arr.join("\n"));  
15.     }  
16.       
17.      
18. </script></span>  

 

 

 

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

 

在form表单里加入：

[html] view plain copy

 

1. <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");
  这代码就可以获取内容

 

[java] view plain copy

 

1. public class AddSpotInfoServlet extends HttpServlet {  
2.   
3.     /** 
4.      *  
5.      */  
6.     private static final long serialVersionUID = 1L;  
7.   
8.     /** 
9.      *  
10.      */  
11.     public void doGet(HttpServletRequest request, HttpServletResponse response)  
12.             throws ServletException, IOException {  
13.         response.setContentType("text/html;charset=UTF-8");  
14.         PrintWriter out = response.getWriter();  
15.         request.setCharacterEncoding("UTF-8");  
16.   
17.         String introduction = new String(request.getParameter("editorValue").getBytes("iso-8859-1"),"UTF-8");  
18.         String picture = Constant.ImgPath.path;  
19.         String position = new String(request.getParameter("position").getBytes("iso-8859-1"),"UTF-8");  
20.         String priceString = new String(request.getParameter("price").getBytes("iso-8859-1"),"UTF-8");  
21.         Double price = Double.parseDouble(priceString);  
22.         String sortString = new String(request.getParameter("sort").getBytes("iso-8859-1"),"UTF-8");  
23.         int spot_sort = Integer.parseInt(sortString);  
24. //      String timeString = new String(request.getParameter("time").getBytes("iso-8859-1"),"UTF-8");  
25. //      Date time = Date.valueOf(timeString);  
26.         String tour_project = new String(request.getParameter("tour_project").getBytes("iso-8859-1"),"UTF-8");  
27.           
28.         Spot spot = new Spot();  
29.         spot.setIntroduction(introduction);  
30.         spot.setPicture(picture);  
31.         spot.setPosition(position);  
32.         spot.setPrice(price);  
33.         spot.setSpot_sort(spot_sort);  
34.         spot.setTour_project(tour_project);  
35.           
36.         SpotDAO spotDao = new SpotDAOImpl();  
37.         boolean flag = spotDao.addInfo(spot);  
38.         if(flag){  
39.             response.sendRedirect(Constant.WEB_URL_SPOT_SERVLET);  
40.         }  
41.           
42.         out.flush();  
43.         out.close();  
44.     }  
45.   
46.     /** 
47.      *  
48.      */  
49.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
50.             throws ServletException, IOException {  
51.         doGet(request, response);  
52.     }  
53.   
54. }  

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