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

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

获取富文本编辑器中的不含HTML标记的纯文本_第1张图片

        预览的功能其实就是一个从富文本提取简单文本的功能,把html的一些标记符(如

等)去掉。正常有两种方式,一种方式是用正则表达式去除用户传给服务器的带有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);

DEMO:显示tinyMCE中的文本

你可能感兴趣的:(获取富文本编辑器中的不含HTML标记的纯文本)