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

╰半橙微兮° 2021-09-10 22:56 325阅读 0赞

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

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

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

![Center][]

下载链接：[http://ueditor.baidu.com/website/download.html][http_ueditor.baidu.com_website_download.html]

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

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

![Center 1][]

然后启动tomcat服务器

[ http://localhost:8080/项目名称t/ueditor1\_4\_3\_2/jsp/controller.jsp?action=config][http_localhost_8080_t_ueditor1_4_3_2_jsp_controller.jsp_action_config]

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

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

![Center 2][]

引入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表单里加入：

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

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

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^

![Center 3][]

[Center]: /images/20210813/a6db73e2f7364e99a54629074398de1d.png
[http_ueditor.baidu.com_website_download.html]: http://ueditor.baidu.com/website/download.html
[http_ueditor.baidu.com_website_index.html]: http://ueditor.baidu.com/website/index.html
[Center 1]: /images/20210813/955d26e072b34f8baf37739f3907ab17.png
[http_localhost_8080_t_ueditor1_4_3_2_jsp_controller.jsp_action_config]: http://localhost:8080/%E9%A1%B9%E7%9B%AE%E5%90%8D%E7%A7%B0t/ueditor1_4_3_2/jsp/controller.jsp?action=config
[Center 2]: /images/20210813/3b0cd5be9ddb4595a30f237309f89a40.png
[Center 3]: /images/20210813/f17237c623d242e9bea53f7f5c5d8ced.png