tinymce的注释的bug

haoningabc

浏览: 1466157 次
性别:
来自: 北京

最近访客更多访客>>

zfyq124

bartontang

dlzdy

cnnlush0605

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

tinymce jQuery CSS HTML Google

tinymce的富文本编辑器很流行，但是不知道是我不会用，还是其中就有bug？

比如在3.3.9.4的版本中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Full featured example using jQuery plugin</title>

<!-- Load jQuery -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load("jquery", "1");
</script>

<!-- Load TinyMCE -->
<script type="text/javascript" src="../jscripts/tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript">
	
	$().ready(function() {
		$('textarea.tinymce').tinymce({
			// Location of TinyMCE script
			script_url : '../jscripts/tiny_mce/tiny_mce.js',

			// General options
			theme : "advanced",
			plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist",

			// Theme options
			theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
			theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
			theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
			theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
			theme_advanced_toolbar_location : "top",
			theme_advanced_toolbar_align : "left",
			theme_advanced_statusbar_location : "bottom",
			theme_advanced_resizing : true,

			// Example content CSS (should be your site CSS)
			content_css : "css/content.css",

			// Drop lists for link/image/media/template dialogs
			template_external_list_url : "lists/template_list.js",
			external_link_list_url : "lists/link_list.js",
			external_image_list_url : "lists/image_list.js",
			media_external_list_url : "lists/media_list.js",

			// Replace values for the template plugin
			template_replace_values : {
				username : "Some User",
				staffid : "991234"
			}
		});
	});
	
</script>
<!-- /TinyMCE -->

</head>
<body>

<form method="post" action="http://tinymce.moxiecode.com/dump.php?example=true">
	<div>
		<h3>Full featured example using jQuery plugin</h3>

		<p>
			This example shows how TinyMCE can be lazy loaded using jQuery. The jQuery plugin will also attach it's self to various jQuery methods to make it more easy to get/set editor contents etc.
		</p>

		<!-- Gets replaced with TinyMCE, remember HTML in a textarea should be encoded -->
		<div>
			<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%" class="tinymce">
				案的发生的法是否啊发发发<br/><br/>	案的发生的法是否啊发发发<br/><br/><!--page-->	案的发生的法是否啊发发发<br/><br/>	案的发生的法是否啊发发发<br/><br/>	案的发生的法是否啊发发发<br/><br/>	案的发生的法是否啊发发发<br/><br/>
			</textarea>
		</div>

		<!-- Some integration calls -->
		<a href="javascript:;" onmousedown="$('#elm1').tinymce().show();">[Show]</a>
		<a href="javascript:;" onmousedown="$('#elm1').tinymce().hide();">[Hide]</a>
		<a href="javascript:;" onmousedown="$('#elm1').tinymce().execCommand('Bold');">[Bold]</a>
		<a href="javascript:;" onmousedown="alert($('#elm1').html());">[Get contents]</a>
		<a href="javascript:;" onmousedown="alert($('#elm1').tinymce().selection.getContent());">[Get selected HTML]</a>
		<a href="javascript:;" onmousedown="alert($('#elm1').tinymce().selection.getContent({format : 'text'}));">[Get selected text]</a>
		<a href="javascript:;" onmousedown="alert($('#elm1').tinymce().selection.getNode().nodeName);">[Get selected element]</a>
		<a href="javascript:;" onmousedown="$('#elm1').tinymce().execCommand('mceInsertContent',false,'<b>Hello world!!</b>');">[Insert HTML]</a>
		<a href="javascript:;" onmousedown="$('#elm1').tinymce().execCommand('mceReplaceContent',false,'<b>{$selection}</b>');">[Replace selection]</a>

		<br />
		<input type="submit" name="save" value="Submit" />
		<input type="reset" name="reset" value="Reset" />
	</div>
</form>
<script type="text/javascript">
if (document.location.protocol == 'file:') {
//	alert("The examples might not work properly on the local file system due to security settings in your browser. Please use a real webserver.");
}
</script>
</body>
</html>

在textarea中出现的显示的时候变成了空行，使格式错乱了
避免这一现象，在结尾加上

<script type="text/javascript">
//	var re=new RegExp("&lt;!--page--&gt;","g");
//	document.getElementById("elm1").innerHTML=document.getElementById("elm1").innerHTML.replace(re,"");
//	alert($("textarea").contents()[0]);
$("textarea").each(function(i){
	var re=new RegExp("&lt;!--page--&gt;","g");
    $(this).html($(this).html().replace(re,""));
 });
</script>

分享到：

mysql非安装版的安装 | Django-1.3的helloworld和1.2.1下载

2011-05-11 00:19
浏览 1614
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

tinymce的注释的bug

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

tinymce的注释的bug

评论

发表评论

相关推荐

indexedDB存图片减少请求

vizceral-example的例子

jsonpath的helloworld

流动图神器vizceral

emscripten asm.js的helloworld

websocket上传文件

webpack的helloworld

iphone6等移动端的css自适应

javascript自定义事件

html5的fiesystem api 浏览器本地存储

websocket传传图片

angularjs使用include后双向绑定失败的解决

html5 陀螺仪

webgl的贝塞尔曲线

chrome app的helloworld

shader and Program编程基本概念 - 转

javascript对象转json

jquery 的svg中国地图

纯css的树型结构

D3 的3d图

最近访客更多访客>>