ZSSRichTextEditor 入坑(一)
ZSSRichTextEditor 是一个老牌的富文本编辑器,很多富文本编辑器都是在其基础上进行修改并使用的。下文用zss简称代替。
作为一个很烂的程序员,第一次接触基本上不知为何物,看到星星最多,星星多必是精品,谁成想这个大坑,一旦进去,甭想上来了;
废话不多说:今天主要的来说说这个坑和怎么填坑
1、最常见的是编辑时出现光标上下跳动,导致页面跳动,
分析:页面跳动是由于光标定位不准,获取光标的位置不准确。
在zss中有两个方法执行页面跳动:zss_editor.updateOffset()和zss_editor.calculateEditorHeightWithCaretPosition(),一个是页面内容超出屏幕上边界自动回滚,一个是页面底边界输入自动换行。页面跳动的原因是两个方法同时执行导致光标定位不准上下弹动。
解决方法:在zss_editor.init =function() 方法中修改zss_editor.updateOffset()方法触发方式:
$(window).on('touchend', function(e) { if (!zss_editor.isDragging && (e.target.id == "zss_editor_footer"||e.target.nodeName.toLowerCase() == "html")) { zss_editor.focusEditor(); }else { zss_editor.updateOffset(); }
在滑动超出上边界的时候触发zss_editor.updateOffset 进行回滚操作。
2、获取文章第一段纯文本:
zss 是一个以div为默认标签的的编辑器,在新建文章的时候输出的都是div的标签,需求是p标签为蓝本编辑,所以统一转化成br 进行正则判断:
zss_editor.oneGetFirstText = function() { var str = document.getElementById("zss_editor_content").innerHTML; let text = str.replace(/^[\s|\n|\r]+|[\s|\n|\r]+$/g,""); text = text.replace(/<span style="display:none;">.<\/span>/g,''); text = text.replace(/ /g,''); text = text.replace(/<div>/g,'<br>'); text = text.replace(/<\/p>/g,'<br>'); let finalStr; if(text.indexOf("<br>") >= 0){ var temparr = text.split("<br>"); for(let i=0;i<temparr.length;i++){ temparr[i] = temparr[i].replace(/<[^>]*>|/g,""); temparr[i] = temparr[i].replace(/[\s|\n|\r]*/g,""); if(temparr[i] && temparr[i] != '.'){ finalStr = temparr[i]; break; } } }else{ let tempStr = text.replace(/<[^>]*>|/g,""); finalStr = tempStr.substring(0,20); } return finalStr;}
以上是我的粗略见解,如果不同,提出大家讨论讨论
补充:获取文章第一段纯文本中iOS10.0 以下对let不支持 可以修改成var !