面试过程中被问到,项目中遇到的难题,或者有什么说的整理.

1.富文本编辑器, div contenteditable. + document.execelCommand.

光标问题,

  • div contenteditable嵌套,删除末尾的光标消失.处理方法,加一个image 1宽1高标签.但是又扯到后端返回值和数据校验问题,因为有个修改提示功能,要对比初始数据和改动数据是否一样,这个问题又扯到IE和chrome对于空格的处理不同.同样一段html,解析出来不一样.解析的原因是会将编辑好的文档传给后端,进入页面要解析这堆html和样式.
  • IE兼容问题,比如失焦事件需要手动触发.IE自动定位滚动到赋值的位置,开始用的scrolltop=0,但是画面撕裂,后来用先hide,赋值后,blur,再显示搞定.

    (3.先display:none 隐藏元素,然后对该元素进行所有的操作,最后再显示该元素。因对display:none的元素进行操作不会引起回流、重绘。IE中甚至可以让默认blur事件失效)

  • 整个结构是,wangEditor第三方基础组件源码(有改造,基础用excelCommond实现)–>richEditor封装一个基础输入框,配置项,change,blur事件处理.校验处理,第三方组件没有校验功能,show,hide,setContent,getContent,setText,getText->reminderEmail整个子组件,更加复杂,里面还有个联动时间计算处理校验规则以及切换页面时校验是否有改动的校验。对比后台数据,解析数据,以及页面数据。->外层还有个emailList,因为reminderEmail可以实时增删改,所以还有个List处理.->外层还有总控制的.包含另外一个部分.

继续阅读“面试过程中被问到,项目中遇到的难题,或者有什么说的整理.”