js在光标处插入节点

之前做一个编辑器,需要实现在<pre>中按下tab的时候插入四个空格,因为js是半路出家,研究了好久。思路是获取当前的selection,拿到对应的range,对range进行操作后替换掉原来selection对应的range。

下文是从  Kejun's Blog  转来的  [javascript]在光标处插入正解 ,给大家一个思路:

之前在网上也找过类似的资料,国内网站介绍的都是老掉牙的方法不兼容标准浏览器。正确的方法是正确运用Selection对象和Range对象,实现在光标当前位置插入文本或结点。但是这两个对象在IE和标准的DOM方式的运用方法是不同的。

思路:首先获得用户的选区(光标当前位置可理解成起始和终止位置一样的选区)。然后,从Selection对象转成Range对象。目的是利用Range对象的方法插内容进去。最后,插入动作结束后将光标移到插入内容的后面。

实现: