xheditor java版富文本编辑器

一：xhEditor简介

     xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化XHTML编辑器。

二：xhEditor下载    

      官方下载地址：http://xheditor.com/download

三：xhEditor使用方法

    

     如上图我们要完成一个在jsp页面中添加一个xhEditor富文本编辑框步骤如下：

     1.在jsp页面中加入xhEditor需要的js包和jquery包

        <script  type="text/javascript" src="${ctx}/scripts/xheditor/xheditor-zh-cn.min.js"></script>

        <script type="text/javascript" src="${ctx}/script/jquery-1.4.4.min.js"></script>

        注：此处的${ctx}标签是移入的一个外部的jsp文件，它的作用是获取当前工程的路径和在jsp页面写入以下代码一致：

               <%
                   String path = request.getContextPath();
                   String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
               %>

     2.在jsp页面引用xhEditor标签  

        2.1.以下代码我们jsp页面body中建立一个<table></table>，在table中加入xhEditor的引用方法<textarea></textarea>

             <table>

             <tr>
                 <td width="70" height="32" align="center" valign="middle">课程描述</td>
                      <td width="300" height="32" align="left" valign="middle"><label>

               
                     <div>
                         <textarea id="descirbe" name="descirbe" rows="10" style="width:150%; border: 1px" >${coursewareDescribe}</textarea>
                    </div>
                  <div id="uploadList"></div>
                 </label></td>
            </tr>

            </table>

           2.2.在head标签加入js方法，用与图片上传

            <script>
                $(document).ready(function(){
                //初始化xhEditor编辑器插件
                $('#descirbe').xheditor({
                tools:'full',
                skin:'default',
                upMultiple:false,
                upImgUrl: "/xheditor/UploadFileServlet",
                upImgExt: "jpg,jpeg,gif,bmp,png",
                onUpload:insertUpload
                });
                //xbhEditor编辑器图片上传回调函数

                function insertUpload(msg) {
                    var _msg = msg.toString();
                    var _picture_name = _msg.substring(_msg.lastIndexOf("/")+1);
                    var _picture_path = Substring(_msg);
                    var _str = "<input type='checkbox' name='_pictures' value='"+_picture_path+"' checked='checked' onclick='return false'/><label>"+_picture_name+"</label><br/>";
                               $("#descirbe").append(_msg);
                    $("#uploadList").append(_str);
                 }
                    //处理服务器返回到回调函数的字符串内容,格式是JSON的数据格式.
                function Substring(s){
                    return s.substring(s.substring(0,s.lastIndexOf("/")).lastIndexOf("/"),s.length);
                }
               });
  
             $(document).ready(function(){
             //初始化xhEditor编辑器插件
            $('#objectives').xheditor({
                     tools:'full',
                     skin:'default',
                     upMultiple:false,
                     upImgUrl: "/xheditor/UploadFileServlet",
                     upImgExt: "jpg,jpeg,gif,bmp,png",
                     onUpload:insertUpload
              });
           //xbhEditor编辑器图片上传回调函数
           function insertUpload(msg) {
                     var _msg = msg.toString();
                     var _picture_name = _msg.substring(_msg.lastIndexOf("/")+1);
                     var _picture_path = Substring(_msg);
                     var _str = "<input type='checkbox' name='_pictures' value='"+_picture_path+"' checked='checked' onclick='return false'/><label>"+_picture_name+"</label><br/>";
                    $("#objectives").append(_msg);
                   $("#uploadList").append(_str);
              }
            //处理服务器返回到回调函数的字符串内容,格式是JSON的数据格式.
          function Substring(s){
                    return s.substring(s.substring(0,s.lastIndexOf("/")).lastIndexOf("/"),s.length);
          }
         });
  
         $(document).ready(function(){
               //初始化xhEditor编辑器插件
               $('#student').xheditor({
               tools:'full',
               skin:'default',
               upMultiple:false,
               upImgUrl: "/xheditor/UploadFileServlet",
               upImgExt: "jpg,jpeg,gif,bmp,png",
               onUpload:insertUpload
          });
         //xbhEditor编辑器图片上传回调函数
         function insertUpload(msg) {
              var _msg = msg.toString();
              var _picture_name = _msg.substring(_msg.lastIndexOf("/")+1);
              var _picture_path = Substring(_msg);
               var _str = "<input type='checkbox' name='_pictures' value='"+_picture_path+"' checked='checked' onclick='return false'/><label>"+_picture_name+"</label><br/>";
               $("#student").append(_msg);
               $("#uploadList").append(_str);
         }
         //处理服务器返回到回调函数的字符串内容,格式是JSON的数据格式.
         function Substring(s){
               return s.substring(s.substring(0,s.lastIndexOf("/")).lastIndexOf("/"),s.length);
         }
         });
     </script>

     3.完成