可编辑div的方法总结之复制文字去除标签和样式
程序员文章站
2022-05-10 16:52:00
//去除复制样式的方法
function textinit(e) {
e.preventdefault();//阻止默认事件
va...
//去除复制样式的方法 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); } } }
首先 需要在可编辑p上绑定 paste 监听函数
/去除复制过来的文字样式以及标签/
$( document ).on( "paste", ".textinner", function(e) { //去除复制样式 textinit(e); //去除复制过来的 标签 if($('.textinner').attr('list-layout') == 'true'){ //如果可编辑p .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(); /*if(tagname == 'span'){ htmlunlist += $(this).text(); } if(tagname == 'div'){ htmlunlist +='<br>'+ $(this).text(); }*/ }); $('.textinner').html(htmlunlist); } } //最后将容器高度 调整为自适应撑起的高度 $(clicktextthis).css('height',$('.textinner').css('height')); $('.edittextbox').css('height',$('.textinner').css('height')); });
上一篇: 揭秘古代退休制度,哪个朝代福利待遇最好?