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中出现<!--page-->的显示的时候变成了空行,使格式错乱了
避免这一现象,在结尾加上
<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>