tinymce的注释的bug

最新推荐文章于 2023-12-22 10:50:25 发布

linux内核控

最新推荐文章于 2023-12-22 10:50:25 发布

阅读量330

点赞数

分类专栏： javascript 文章标签： tinymce jQuery CSS HTML Google ViewUI

本文链接：https://blog.csdn.net/leafrenchleaf/article/details/83918727

版权

javascript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

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("<!--page-->","g");
//	document.getElementById("elm1").innerHTML=document.getElementById("elm1").innerHTML.replace(re,"");
//	alert($("textarea").contents()[0]);
$("textarea").each(function(i){
	var re=new RegExp("<!--page-->","g");
    $(this).html($(this).html().replace(re,""));
 });
</script>

linux内核控

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tinymce的注释的bug

tinymce的富文本编辑器很流行，但是不知道是我不会用，还是其中就有bug？比如在3.3.9.4的版本中[code="java"]Full featured example using jQuery plugin google.load("jquery", "1"); $().ready(function() { $...
复制链接

扫一扫

专栏目录