编辑器工具栏:类似word的编辑器

xheditor的实例程序—类似word的编辑器-LMLPHP

1.1.下载,兼容性

xhEditor官方网站地址为:http://xheditor.com/,打开右上角的免费下载 | 参数向导链接,即可找到最新版本的下载地址。

xhEditor是基于浏览器的HTML、CSS和Javascript环境开发的,因此原则上市场上绝大部分浏览器我们都能完美的运行,目前已测试的浏览器兼容列表如下:IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+ (+号代表往后所有新版本)。xhEditor是完全基于浏览器环境的,因此不存在操作系统选择性,是完全跨平台的。xhEditor同时也可以应用在任何的服务端语言环境下,例如:PHP、ASP、ASP.NET、JAVA等,可以在您的CMS、博客、论坛、商城等互联网平台上完美的嵌入运行,能够非常灵活简单的和您的系统实现完美的无缝衔接。

1.2.入门使用

下载最新版本xhEditor:http://xheditor.com/download

上传其中的xheditor.min.js以及xheditor_lang、xheditor_emot、xheditor_plugins和xheditor_skin四个文件夹到网站相应文件夹中。

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

在需要调用xhEditor编辑器的网页head标签结束之前添加以下代码:

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

注:jQuery和xhEditor的js文件路径请根据你网站具体路径情况相应修改

在需要实现可视化的文本框textarea属性中添加:

 class="xheditor"
例如:<textarea name="content" class="xheditor">test</textarea>

2.1. 进阶篇

xhEditor提供两种方式初始化编辑器:

  • 方法1:利用class属性来初始化和传递各种初始化参数,例:
class="xheditor {skin:'default'}"
  • 方法2:利用xhEditor提供的jQuery插件接口来实现对特定textarea的初始化和传递参数,例:
$('#elm1').xheditor();或者
$('#elm1').xheditor({tools:'mini'});

如果两种方法的代码同时存在页面中,方法2的代码不会有任何效果。

xhEditor卸载编辑器方法:

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

  

05-22 14:35