可编辑div的一些方法总结(一)复制文字去除标签和样式

//去除复制样式的方法
    function textInit(e) {
        e.preventDefault();//阻止默认事件
        var text;
        var clp = (e.originalEvent || e).clipboardData;
        if (clp === undefined || clp === null) {
            text = window.clipboardData.getData("text") || "";
            if (text !== "") {
                if (window.getSelection) {
                    var newNode = document.createElement("span");
                    newNode.innerHTML = text;
                    window.getSelection().getRangeAt(0).insertNode(newNode);
                } else {
                    document.selection.createRange().pasteHTML(text);
                }
            }
        } else {
            text = clp.getData('text/plain') || "";
            if (text !== "") {
                document.execCommand('insertText', false, text);
            }
        }
    }

首先 需要在可编辑div上绑定 paste 监听函数

    /*去除复制过来的文字样式以及标签*/
  $( document ).on( "paste", ".TextInner", function(e) {
        //去除复制样式
        textInit(e);
        //去除复制过来的 标签
        if($('.TextInner').attr('list-layout') == 'true'){ //如果可编辑div .TextInner中存在li
            //找到所有的li
            var $lichild = $('.TextInner').find('li');
            $lichild.each(function () {
                //获取li 的子元素var htmlunList = '';
                var $childEles = $(this).children().not('br');
                var htmlunList = '';
                htmlunList +=   $(this)
                    .clone()    //复制元素
                    .children() //获取所有子元素
                    .remove()   //删除所有子元素
                    .end()  //回到选择的元素
                    .html();//获取文本值
                if($childEles>0){
                    $childEles.each(function(){
                        htmlunList +=$(this).text();
                    })
                }
                $(this).html(htmlunList);
            })
        }else{
            var $childEles = $('.TextInner').children().not('br');
            if($childEles.length>0){
                var htmlunList = '';
                htmlunList +=   $('.TextInner')
                    .clone()    //复制元素
                    .children() //获取所有子元素
                    .remove()   //删除所有子元素
                    .end()  //回到选择的元素
                    .html();//获取文本值
                $childEles.each(function(){
                    var tagname =  $(this)[0].tagName;
                    htmlunList += $(this).text();
                });
                $('.TextInner').html(htmlunList);
            }

        }
        //最后将容器高度 调整为自适应撑起的高度
        $(clickTextThis).css('height',$('.TextInner').css('height'));
        $('.editTextBox').css('height',$('.TextInner').css('height'));
    });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值