Select 所有文本未删除 h-tags

Question

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

为了简化编辑 page-builder 中的新元素，如果容器中的文本是 dummy-text:

，我使用以下代码

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

问题是，如果容器有一个初始样式集，比如 h-tag，当您开始输入时 h-tag 会被删除。

我想在元素中保留 h-tag 以便初始样式已经设置并且用户体验更好一些。

我已尝试使用 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-tags 仍然会被删除：

选择前：

选择时：

在我开始输入之后：

有什么办法可以fix/hack这个问题吗？

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/

Select 所有文本未删除 h-tags

Select all text without removing h-tags

ckeditor