xheditor用法

近在做项目的时候需要使用到HTML 编辑器，虽然FCKEditor 、 CKEditor 等很多现成的工具，但是为了相对的轻量级设计，选择了xhEditor 。苦于网上很难找到相关的基于Java 的后台实现，故花了点时间做了个编辑器的小demo ，主要是解决图片上传的问题。

以下是对xhEditor 使用的基本总结：

1 、下载xhEditor 最新版本【这里演示的是1.0.0 – RC3 】
下载地址：http://code.google.com/p/xheditor/downloads/list

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

3 、在相应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>

4 、调用方法有两种：
方法1 ：在textarea 上添加属性： class="xheditor {skin:'default'}" ，前面主参数也可以是xheditor-mini 和xheditor-simple ，分别加载迷你和简单工具栏，后面详细参数可以省略。
【推荐使用】方法2 ： 在您的页面初始JS 代码里加上： $(“#xh_editor”).xheditor();

$(document).ready(function() $('#xh_editor').xheditor({ tools:'full', skin:'default', upMultiple:false, upImgUrl: "/servlet/XhEditorUploadServlet", upImgExt: "jpg,jpeg,gif,bmp,png", onUpload:insertUpload // 指定回调函数, 需要自己另外在编写函数实现回调处理. }); });

 

 

 

自己用法：

    <script src="JS/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="JS/xheditor-zh-cn.src.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(pageInit);
        function pageInit() {
            $('#preview').xheditor({ upMultiple: false });
        }

    </script>