最近尝试造一造富文本编辑器的轮子，使用的是【contentEditable=“true”】
想通过一个按钮，点击,切换输入颜色，如下
我是红色|=> 我是红色我是黑色|
我的想法是：
检测range.endContainer的父节点的nodeName是不是font
如果是，就在font的后面添加一个空的文本节点，并让这个文本节点获取焦点
如此一来，不就跳出font标签了
var selection = document.getSelection() ;
var range = selection.getRangeAt(0) ;
var endContainer = range.endContainer(); // 这里假设endContainer是一个文本节点
var ecParent = endContainer.parentNode ;// 获取其父节点,假设父节点的 nodeName=="FONT"
var text = document.createTextNode(''); // 创建一个文本节点
ecParent .parentNode.inserBefore(text,ecParent.nextSibling); //把文本结点插入到range的结束节点后面
var newRange = document.createRange();
newRange.selectNode(ecParent.nextSibling);
selection.removeAllRanges();// 移除所有Range
selection.addRange(newRange);
selection.collapseToEnd(); //将当前的选区折叠到最末尾的一个点。
试了试，发现选区折叠后，焦点并不在【空的文本节点】上，还在【endContainer】上
如果【文本t节点】不是空的，焦点就会落在【文本节点】上
其他类型的空节点，同样也无法获取焦点
这是为什么呢
这是一个demo，点击【高亮】切换输入文本颜色
啊這個問題問我就對了，我也喜歡自己造輪子
我不僅造富文本編輯器的輪子，連光標和選區也要自己造
連文字的繪製也要自己實現纔好（雖然很難做到和原生一模一樣）
不過，我希望你首先表述要清楚
其次你要想清楚問「爲什麼」到底是在問什麼
做到以上幾點你的問題就不存在了。
塌縮的選區等於光標，而垃圾的瀏覽器有一個不對稱的行爲，那就是塌縮的光標「跟前」還是「跟後」的問題。
反正我見過的瀏覽器都是「跟前」。
也就是說
bold text| => bold text inputed something|
soem text |bold text => some text inputed something |bold text
所以，如果空節點是在文本之前，還是可以獲取焦點的。
這種坑爹的行爲令我抓狂，於是我投奔 WYSIWYG markdown 了。