yaniswang / xhEditor

xhEditor是一个基于jQuery开发的简单迷你并且高效的在线可视化HTML编辑器。
http://xheditor.com/
GNU Lesser General Public License v3.0
244 stars 79 forks source link

xhEditor

xhEditor是一个基于jQuery开发的简单迷你并且高效的在线可视化HTML编辑器,基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。

xhEditor完全基于Javascript开发,您可以应用在任何的服务端语言环境下,例如:PHP、ASP、ASP.NET、JAVA等。

xhEditor可以在您的CMS、博客、论坛、商城等互联网平台上完美的嵌入运行,能够非常灵活简单的和您的系统实现完美的无缝衔接。

自2009年4月首个版本发布以来,凭借我们人性化的用户体验和不断持续完善的态度,越来越多的网站选择了使用xhEditor。

我们不是最好的,但是我们会努力做的更好,我们愿意倾听和接受所有用户的心声,长期坚持的开发和完善下去。

主要特点:

兼容以下浏览器:

许可协议:

xhEditor默认基于LGPL开源许可协议发布,您只需遵守LGPL开源协议,即可永久免费使用xhEditor编辑器。以下为LGPL开源许可概要:

使用方法:

  1. 下载xhEditor最新版本。

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

  2. 解压并上传

    解压压缩文件,将其中的xheditor.min.js以及xheditor_lang、xheditor_emot、xheditor_plugins和xheditor_skin四个文件夹上传到网站相应目录

    注:如果您网站中没有使用jQuery框架,也请一并上传jquery文件夹中的jquery-1.4.4.min.js

  3. 引用JS代码

    在相应html文件的之前添加

    <script type="text/javascript" src="http://static.xxx.com/js/jquery.js"></script>
    <script type="text/javascript" src="http://static.xxx.com/js/xheditor.js"></script>
    <script type="text/javascript" src="http://static.xxx.com/js/xheditor_lang/zh-cn.js"></script>

    注:如果jQuery之前已经在项目页面中使用,请勿重复添加引用代码

  4. 初始化编辑器

    方法1:在textarea上添加属性: class="xheditor"

    <textarea name="content" class="xheditor">test</textarea>

    方法2:在您的页面初始JS代码里加上: $('#elm1').xheditor();

    $({
        $('#elm1').xheditor();
    });

    相应的卸载编辑器的代码为

    $('#elm1').xheditor(false);

    重要说明:2种初始化方法只能选择其中一种,不能混合使用,优先级分别是:class初始化>JS初始化,如果页面中使用了class初始化模式,JS初始化代码就无效了

如何开发构建xhEditor:

安装nodejs:

http://nodejs.org/

获取代码:

git clone git://github.com/yaniswang/xhEditor.git

安装grunt:

npm install grunt-cli -g
cd xhEditor && npm install
grunt -version

开发调试

open wizard.html
edit src/**

构建并打包zip:

grunt

链接向导: