xheditor java版富文本编辑器

本文介绍了一个基于jQuery的高效XHTML编辑器xhEditor,详细讲解了如何在JSP页面中引入和使用该编辑器,包括所需JS包的加载方式及配置参数说明。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一: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.完成

 

 

    

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值