写个文档编辑器我感觉死了半条命,还好有点成果,分享分享。
首先如果你要写文档编辑器的话,要理解Selection 对象,Range对象,这里提供链接developer网站,虽然都是英文,但是还是非常简单的,只要搞懂了这两个对象的函数和属性,做文档编辑器妥妥的(如果不理解contentEditable这个属性的原理和作用,请查看我的博客中的前端神技能)
注意事项:
1.editor-hr
对于hr增加在文本中时,一定要在后面加上一个<br>标签,否则无法正常换行,当然如果你是增加进去的话,外面也被包裹一个<p>标签
去的话
2.editor-range//只是对光标覆盖部分的处理
为一个选中对象,从selection.getRangeAt(0){可以读出多选,请自主选中}中读出
3.editor-selection//真正控制光标位置的存在
当前的选择对象,可以理解为光标覆盖或者时存在的文本位置,
4.editor-selectAllChildren(node)选择某个节点的所有字节点
其中存在一定兼容性,我直接忽略了,IE6这些玩意都要被淘汰了,我懒了点,没写接下来就是源代码了:
BPTMQEditor 在这个github中下载就可以了,里面是详细的解释,包括一些函数的使用和需要注意的事项等