JQuery 制作的一款在线编辑器（xheditor）。兼容IE，Firefox...感觉不错

来源：互联网发布：生活中耐看的女生知乎编辑：程序博客网时间：2024/05/16 03:58

http://h330894169.iteye.com/blog/748128

http://xheditor.com/

1.先去xheditor的官方网站下载压缩文件，网址：http://xheditor.com/
2.根据你自己的路径，在你的Html文件上面加入:

Html代码

<link rel="stylesheet" href="css/common.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/xheditor-zh-cn.min.js?v=1.0.0-final"></script>

<link rel="stylesheet" href="css/common.css" type="text/css" media="screen" /><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/xheditor-zh-cn.min.js?v=1.0.0-final"></script>

3.建立一个textarea，给他取一个id.
4.导入这一段。记住。$('#elem1').一定要和textarea的id一样，

Html代码

<script type="text/javascript">
$(pageInit);
function pageInit(){
$('#elem1').xheditor({skin:'vista',upImgUrl:upload.jsp'});
}
</script>

<script type="text/javascript">$(pageInit);function pageInit(){$('#elem1').xheditor({skin:'vista',upImgUrl:upload.jsp'});}</script>

5.这样。几个简单的在线编辑器就好了，非常实用。美观度也不错。皮肤，按钮什么。需要什么可以自行修改。具体修改方法请参考你下载的压缩包。里面有非常详细的例子程序。
6.再这里最后强调一下，css文件的导入。记住。他需要2个css文件。iframe.css和ui.css还有一个common.css.他们的路径位置是有关联的、结构目录请参考我附件下面的图片。已经

Html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xhEditor demo4 : </title>
<link rel="stylesheet" href="http://localhost:8080/TMS/css/common.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/xheditor-zh-cn.min.js?v=1.0.0-final"></script>
<script type="text/javascript">
$(pageInit);
function pageInit(){
$('#elem1').xheditor({skin:'vista',upImgUrl:'http://localhost:8080/TMS/Resource_upload'});
}
</script>
</head>
<body>
<textarea id="elem1" name="elm1" rows="8" cols="80" style="width: 80%">
</textarea>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>xhEditor demo4 : </title><link rel="stylesheet" href="http://localhost:8080/TMS/css/common.css" type="text/css" media="screen" /><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/xheditor-zh-cn.min.js?v=1.0.0-final"></script><script type="text/javascript">$(pageInit);function pageInit(){$('#elem1').xheditor({skin:'vista',upImgUrl:'http://localhost:8080/TMS/Resource_upload'});}</script></head><body><textarea id="elem1" name="elm1" rows="8" cols="80" style="width: 80%"></textarea></body></html>

大小: 15.8 KB

查看图片附件