最近尝试造一造富文本编辑器的轮子，使用的是【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，点击【高亮】切换输入文本颜色