获取富文本编辑器中的不含HTML标记的纯文本

博客类型的网站，往往需要使用在线的Rich Text Editor给用户提供发表博客的功能，比如博客园使用的是tinyMCE。但同时也注意到，在每位同学的博客首页都有“博客预览”，这是怎么实现的呢？



预览的功能其实就是一个从富文本提取简单文本的功能，把html的一些标记符（如<b></b>、<p></p>、<span></span>、<div></div>等）去掉。正常有两种方式，一种方式是用正则表达式去除用户传给服务器的带有html标记的富文本，但这种方法因为需要考虑的html元素还是比较多的，也就导致正则表达式较多，而且使用过多的正则表达式会导致效率地下。

是否有其它比较好的方法呢？通过观察，会发现在一个格式复杂网页中，你用鼠标选中某一部分并复制，这时剪切板里的就仅仅是简单的文本，不包含任何的html标记。我们用鼠标选中文本这件事，JavaScript也是可以完成的，代码如下：

function SelectText(element) {
var text = document.getElementById(element);
if ($.browser.msie) {
var range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
//显示已选中的文本
alert(window.getSelection().toString());
}
else {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
//显示已选中的文本
alert(window.getSelection().toString());
}
}

DEMO:显示博客正文

我们再来看看在tinyMCE中应该怎么做。通过查找资料发现，tinyMCE其实已经很好的支持了这个功能，例如你想获取tinyMCE编辑器里前200个字符：

var ed = tinymce.activeEditor;
var e = ed.getBody();
ed.selection.select(e);
var text = ed.selection.getContent( { 'format' : 'text' } );
var first_200 = text.substr(0, 200);

// tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "autolink,lists,spellchecker,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",

// 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,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,

// Skin options
skin : "o2k7",
skin_variant : "silver",

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

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

// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
// ]]>
// //选择网页中的文本
function SelectText() {
var text = document.getElementById('cnblogs_post_body');
if ($.browser.msie) {
var range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
}
else {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
alert(window.getSelection().toString());
}
function ShowTinyMCE(){
var ed = tinymce.activeEditor; var e = ed.getBody(); ed.selection.select(e); var text = ed.selection.getContent( { 'format' : 'text' } ); var first_200 = text.substr(0, 200);
alert(first_200);
}
// ]]>

DEMO:显示tinyMCE中的文本