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


    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(" "));  
    15.     }  
    16.       
    17.      
    18. </script></span>  

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

    在form表单里加入:

    [html] view plain copy
     
    1. <script id="editor" type="text/plain" style="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^

  • 相关阅读:
    判断是否GUID (转载)
    解决升级至.net4后出现A potentially dangerous Request.Form value was detected from the client (转载)
    C#如何设置Listview的行高高度 转载
    mojoportal之使用tab标签
    C#Windows 服务制作安装删除. 用户注销后,程序继续运行 (转载)
    c# winforms TextBox的记忆功能
    C# 创建windows服务、socket通讯实例 (转载 )
    mojoportal中的模块映射
    winforms中限定上传文件类型
    [笔记]软核 固核 硬核的区别
  • 原文地址:https://www.cnblogs.com/cxxjohnson/p/6946940.html
Copyright © 2020-2023  润新知