开源HTML编辑器xhEditor用法详解

这个是我在17年CSDN中写的一篇博客，今天以旧换新，再温习一遍...

1、在线可视化HTML编辑器概述

在Web程序应用中，最多见的一种行为是信息和言论的发布和交流。而在信息发布的同时，每每会有对信息发布的格式、类型和功能上的需求，好比：加粗、下划线等等，以使文字信息可以更形象更美观的传达给阅读者，同时也提升信息发布的工做效率。在这个需求的背景下，HTML在线编辑器就应运而生了。

顾名思义，在线HTML编辑器就是在线编辑HTML代码的工具，它常常被应用于留言板留言、论坛发贴、Blog编写日志或等须要用户输入HTML的地方，是Web应用的经常使用模块之一。在线HTML编辑器能够实现对编辑内容添加各类丰富多彩的文字效果，以及提供各类方便快捷的操做功能，最大的提升编辑工做效率。在线HTML编辑器是任何网站不可或缺的重要功能组件，是互联网用户驾轻就熟的驰骋网络的有力工具。

2、使用xhEditor

一、下载xhEditor 最新版本

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

二、解压压缩文件 【demo 文件夹中能够查看各类形式的配置实例】，将其中的jquery- 1.4.2.min.js 、xheditor-zh-cn.min.js 【这里暂时使用中文版】以及 xheditor_emot、xheditor_plugins 和xheditor_skin 三个文件夹拷贝到项目的相应目录。

三、在相应html 文件的head 标签结束以前添加： 
<script src="jquery-1.4.2.min.js"  type="text/javascript"></script>
<script src="xheditor-zh-cn.min.js"  type="text/javascript"></script>

四、调用方法

方法1 

　　在textarea 上添加属性： class="xheditor {skin:'default'}" ，前面主参数也能够是xheditor-mini 和xheditor-simple ，分别加载迷你和简单工具栏，后面详细参数能够省略。

方法2 【推荐使用】

　　在您的页面初始JS 代码里加上： $(“#helpInfo”).xheditor();

<script type="text/javascript">
  $(document).ready(function(){
    //初始化xhEditor编辑器插件
    $("#helpInfo").xheditor({
     　　tools:'simple',
     　　skin:'default',
     　　upMultiple:true,
     　　upImgUrl: '{editorRoot}/upload.jsp',
     　　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/>";
     　　$("#helpInfo").append(_msg);
     　　//$("#uploadList").append(_str);
    }
    //处理服务器返回到回调函数的字符串内容,格式是JSON的数据格式.
    function Substring(s){
     　　return s.substring(s.substring(0,s.lastIndexOf("/")).lastIndexOf("/"),s.length);
    }
   });
  </script>

五、 使用MyEclipse建立Java Web项目

把 下载的xhEditor源代码包中的相关文件拷贝到本身的web目录，能够建立一个文件夹scripts存放。 

能够看出咱们大体须要这几个步骤： 

1. 获取xheditor源文件并放置到项目的相应位置。 
2. 加入文件上传组件须要的jar包。 
3. 指 定文件存放目录ARTICLE_IMG。 
4. 建立Servlet文件，并在web.xml中配置路径。 
5. 建立并编写基于jquery脚本的xheditor.html文件。

6. 编写HTML或者JSP页面

注意：上述代码基于jquery。upImgUrl属性配置的是图片上传的后台路径，/xheditor /servlet /UploadFileServlet：xheditor属于项目名称，后面的/servlet/UploadFileServlet是web.xml中 配置的servlet地址。

七、 编写后台文件上传处理的Servlet代码

八、web.xml的servlet配置

九、 配置基本完成，部署到tomcat容器测试。 
打来浏览器，进入HTML页面，xheditor编辑器初始化状态。如图所示。 

十、 图片上传到后台而且显示到编辑器 
点击工具栏的图片上传按 钮，而后根据上传按钮选择本地文件，图片将马上以AJAX的方式上传到后台。如图所示。

到这里基于Java后台的xheditor编辑器的 图片上传功能基本实现完毕，编辑器基于jquery编写，具备很是好的拓展性和伸缩性，各位读者还能够根据本身的兴趣慢慢挖掘源代码包中的其余示例，同时 也能用Java去实现它们，这样就最好咯。之后咱们作项目的时候就能够马上拿来使用，方便快捷，省去不少麻烦事。

图片文件上传成功后，点击肯定按钮才能把图片显示到编辑器中，同时 页面下方将会保存checkbox，对应的是文件的名称，这样方便页面提交后，到后台相应的目录寻找文章对应的图片有那些，而后能够把图片写入到数据库。