xheditor的简单介绍

在弄一个网站时,用到了这个xheditor,感觉很好用!!文件上传是自己写的!我本人用的是xheditor-1.1.14,其中感觉除了说明文档之外,讲解的比较有用的就是demo05.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 demo5 : Javascript API交互</title>
<link rel="stylesheet" href="common.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/xheditor-1.1.14-zh-cn.min.js"></script>
<script type="text/javascript">
$(pageInit);
var editor;
function pageInit()
{
	editor=$('#elm1').xheditor({shortcuts:{'ctrl+enter':submitForm}});//交互方式1
	editor=$('#elm1')[0].xheditor;//交互方式2
}
function submitForm(){$('#frmDemo').submit();}
</script>
</head>
<body>
<div id="header-nav">
	<ul>
		<li><a href="demo01.html"><span>默认模式</span></a></li>
		<li><a href="demo02.html"><span>自定义按钮</span></a></li>
		<li><a href="demo03.html"><span>皮肤选择</span></a></li>
		<li><a href="demo04.html"><span>其它选项</span></a></li>
		<li><a href="demo05.html"><span>API交互</span></a></li>
		<li><a href="demo06.html"><span>非utf-8编码调用</span></a></li>
		<li><a href="demo07.html"><span>UBB可视化</span></a></li>
		<li><a href="demo08.html"><span>Ajax上传</span></a></li>
		<li><a href="demo09.html"><span>插件扩展</span></a></li>
		<li><a href="demo10.html"><span>iframe调用上传</span></a></li>
		<li><a href="demo11.html"><span>异步加载</span></a></li>
		<li><a href="demo12.html"><span>远程抓图</span></a></li>
		<li><a href="../wizard.html" target="_blank"><span>生成代码</span></a></li>
	</ul>
</div>
<form id="frmDemo" method="post" action="show.php">
	<h3>xhEditor demo5 : Javascript API交互</h3>
	<textarea id="elm1" name="elm1" rows="12" cols="80" style="width: 80%">
<p>当前实例调用的Javascript源代码为:</p><p>var editor;<br />editor=$('#elm1').xheditor();//方式1<br />editor=$('#elm1')[0].xheditor;//方

式2<br />editor.pasteHTML('&lt;strong&gt;粘贴的内容&lt;/strong&gt;');</p><p><br />注:本页面演示大部分外部调用的API接口,更多详

细帮助信息请查看:<a href="http://xheditor.com/manual/2#chapter3">http://xheditor.com/manual/2#chapter3</a></p>
	</textarea>
	<br /><br />
	<input type="submit" name="save" value="Submit" />
	<input type="reset" name="reset" value="Reset" />
</form>
<br/>
<div style="border:1px solid #999;padding:10px;">
<a href="javascript:;" οnclick="editor.focus();return false;">focus()</a> | 
<a href="javascript:;" οnclick="editor.setSource('<p>aaa1</p>');return false;">setSource('<p>aaa1</p>')</a> |
<a href="javascript:;" οnclick="$('#elm1').val('<p>aaa2</p>');return false;">$('#elm1').val('<p>aaa2</p>')</a> |
<a href="javascript:;" οnclick="alert(editor.getSource());return false;">getSource()</a> | 
<a href="javascript:;" οnclick="alert($('#elm1').val());return false;">$('#elm1').val()</a> |
<a href="javascript:;" οnclick="editor.appendHTML('<strong>添加在尾部</strong>');return false;">appendHTML('<strong>添加在尾部</strong>')</a> | 
<a href="javascript:;" οnclick="alert(editor.getSelect());return false;">getSelect()</a> | 
<a href="javascript:;" οnclick="alert(editor.getSelect('text'));return false;">getSelect('text')</a> | 
<a href="javascript:;" οnclick="editor.pasteHTML('<strong>粘贴的内容</strong>');return false;">pasteHTML('<strong>粘贴的内容</strong>')</a> | 
<a href="javascript:;" οnclick="editor.pasteText('<strong>粘贴的内容</strong>');return false;">pasteText('<strong>粘贴的内容</strong>')</a> | 
<a href="javascript:;" οnclick="alert(editor.formatXHTML('<b>abc</b>'));return false;">formatXHTML('<b>abc</b>')</a> | 
<a href="javascript:;" οnclick="editor.toggleSource();return false;">toggleSource()</a> | 
<a href="javascript:;" οnclick="editor.toggleSource(true);return false;">toggleSource(true)</a> | 
<a href="javascript:;" οnclick="editor.toggleFullscreen(true);return false;">toggleFullscreen(true)</a> |  
<a href="javascript:;" οnclick="editor.toggleShowBlocktag();return false;">toggleShowBlocktag()</a> | 
<a href="javascript:;" οnclick="alert(editor.settings.upLinkExt);return false;">alert(settings.upLinkExt)</a> | 
<a href="javascript:;" οnclick="editor.exec('About');return false;">exec('About')</a>
</div>
</body>
</html>


 

 

 在servlet读取textarea中的值通过getSoruce(),存到数据库的是html代码,而不是纯文字!!不过,再从数据库中读取出来放到编辑器中后,还是位子!!!编辑器本身会把html代码去掉!!

 

还有一点就是读取textarea中的值存到数据库时,不能直接通过name或id对textarea取值,可以这样:

 


<script>

 function check()
 {
 document.getElementById("qbody").value= editor.getSource();在通过js提交表单时,将textarea中的值先赋值给name为“qbody”的input(type="hidden")表单项,再通过读取qbody表单项的value值!!!实现中转

 var form=document.getElementById("form");
  form.submit();
   return true;

}

</script>

 

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
xhEditor是一个基于jQuery开发的简单迷你并且高效的在线可视化HTML编辑器,基于网络访问并且兼容IE 6.0 ,Firefox 3.0 ,Opera 9.6 ,Chrome 1.0 ,Safari 3.22 。完全基于JavaScript开发,您可以应用在任何的服务端语言环境下,例如:PHP、ASP、ASP.NET、JAVA等。可以在您的CMS、博客、论坛、商城等互联网平台上完美的嵌入运行,能够非常灵活简单的和您的系统实现完美的无缝衔接。 主要特点: 精简迷你 编辑器初始加载4个文件,包括:1个js(50k) 2个css(10k) 1个图片(5k),总共65k。若js和css文件进行gzip压缩传输,可以进一步缩减为24k左右。 高效jQuery引擎 基于强大的开源jQuery引擎开发,提供高效的代码执行效率,并完美的实现最佳浏览器兼容性。 使用简单 简单的调用方式,加一个class属性就能将您的textarea立马变成一个功能丰富的可视化HTML编辑器。 强大Ajax上传 内置强大的Ajax上传,包括HTML4和HTML5上传支持(多文件上传、真实上传进度及文件拖放上传),追求完美的用户上传体验。 Word完美支持 实现Word代码自动检测并清理,提供高效完美的Word代码过滤方案,生成代码最优化精简,但是却不丢失任何细节效果。 安全的UBB 提供完美的UBB可视化编辑器解决方案,在您获得安全高效代码存储的同时,又能享受可视化编辑的便捷。 兼容以下浏览器: IE6, IE7, IE8, IE9 Firefox 3.0 Chrome 1.0 Opera 9.6 Safari 3.22
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值