zoukankan      html  css  js  c++  java
  • 获取富文本编辑器中的不含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);

    DEMO:

    作者:Create Chen
    出处:http://technology.cnblogs.com
    说明:文章为作者平时里的思考和练习,可能有不当之处,请博客园的园友们多提宝贵意见。
    知识共享许可协议本作品采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可。

  • 相关阅读:
    Xcode及模拟器SDK下载
    修改Navigation Bar上的返回按钮文本颜色,箭头颜色以及导航栏按钮的颜色
    NJKWebViewProgress ——webview进度条
    _tmain 和 main
    XSS原理
    逆向工程
    guide
    网络数据包
    Linux 文件系统 和文件属性
    Linux 文件系统
  • 原文地址:https://www.cnblogs.com/technology/p/2703445.html
Copyright © 2011-2022 走看看