选择所有文字而不删除h-tags

Question

我在CMS中使用内联共享CKEditor（版本4.5.7）。

为简化页面构建器中新元素的编辑，如果容器中的文本是虚拟文本，我使用以下代码：

editor.on( 'focus', function(ev) {
    if(obj.isDummyText($(ev.editor.element.$))) {
        ev.editor.execCommand( 'selectAll' );
    }
});

问题是，如果容器有一个初始样式集，就像h-tag一样，当你开始输入时，h-tag会被剥离。

我想在元素中维护该h-tag，因此已经设置了初始样式，并且UX更好一些。

我尝试用CKEDITOR.config修复此问题：

config.enterMode = CKEDITOR.ENTER_BR;
config.shiftEnterMode = CKEDITOR.ENTER_BR;
config.forcePasteAsPlainText = false;
CKEDITOR.dtd.$removeEmpty['i']  = false;
CKEDITOR.dtd.$removeEmpty['h1'] = false;
CKEDITOR.dtd.$removeEmpty['h2'] = false;
CKEDITOR.dtd.$removeEmpty['h3'] = false;
CKEDITOR.dtd.$removeEmpty['h4'] = false;
CKEDITOR.dtd.$removeEmpty['h5'] = false;
CKEDITOR.dtd.$removeEmpty['h6'] = false;
config.allowedContent = true;

可悲的是，这并没有改变任何东西，当您开始输入时，h标签仍会被剥离：

选择之前：

选择时：

在我开始输入后：

有没有办法解决/破解这个问题？

Answer 1

我找到的解决方案是为h4元素的内容创建一个新的selectionRange（没有h4元素本身）：

editor.on('focus', function(ev) {
    setTimeout(function() {
    var element = element = ev.editor.document.getElementsByTag('h4').getItem(0).$;
    var textNode = element.childNodes[0];

    var startIndex = 0;
    var endIndex = textNode.length;

    var range = document.createRange();
    range.setStart(textNode, startIndex);
    range.setEnd(textNode, endIndex);

    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
  }, 100);
})

代码在所有浏览器上运行良好但IE没有setTimeout功能，所以我添加了这个。

这是一个有效的例子：
https://jsfiddle.net/dhxpyobo/