Javascript Contenteditable div选择标题标记中的文本

我有一个contenteditable div，供用户为活动创建日记条目。它非常简单-你可以插入标题、文本和图片。我在div上方使用一个按钮，插入h1标记和一个虚拟标题，然后用户将其修改为自己的标题文本。我目前将插入符号放在h1元素之后，但我确实希望选择文本（并且只选择文本）。我知道如何选择整个h1元素，但如果我在上面键入，它会删除h1标记。我认为有一种方法可以选择h1元素的子元素（即文本），但我似乎无法做到这一点

<div>   
<button id='savebutton' style='height: 22px; color: red; font-weight:bold;' onclick='savehtml()'>Save</button>
<button id='addtitle' style='height: 22px' onclick='addTitle()'>Add Title</button>
<button id='fileSelect' onclick='clickxfile()'>Insert Picture</button>
<form style='display: inline' id='imageform' name='imageform' style='text-align:left' action='JournalUploadImage.php' method='post' target='_blank' enctype='multipart/form-data'>
    <input style='height: 22px' type='file' size=15 name='xfile' id='xfile' onmouseover='SaveSelection();' /> <div id='inspictxt' style='display: inline'>Insert Picture</div>
    <br>
</form>

拯救
添加标题
插入图片
插入图片

和当前的JS来添加标题

function addTitle(){
var sel= document.getElementById('htmlbox');
sel.focus();  // make sure the title gets inserted in the htmlbox
htmlpaste= '<h1>Insert Your Title Here</h1>\n<br>';
pasteHtmlAtCaret(htmlpaste, false); }

函数addTitle（）{
var sel=document.getElementById（'htmlbox'）；
sel.focus（）；//确保在htmlbox中插入标题
htmlpaste='在此处插入您的标题\n
'；
pasteHtmlAtCaret（htmlpaste，false）；}

哪个叫

function pasteHtmlAtCaret(html, selectPastedContent) {
var sel, range;
if (window.getSelection) {
    // IE9 and non-IE
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
        range = sel.getRangeAt(0);
        range.deleteContents();

        // Range.createContextualFragment() would be useful here but is
        // only relatively recently standardized and is not supported in
        // some browsers (IE9, for one)
        var el = document.createElement("div");
        el.innerHTML = html;
        var frag = document.createDocumentFragment(), node, lastNode;
        while ( (node = el.firstChild) ) {
            lastNode = frag.appendChild(node);
        }
        var firstNode = frag.firstChild;
        range.insertNode(frag);

        // Preserve the selection
        if (lastNode) {
            range = range.cloneRange();
            range.setStartAfter(lastNode);
            if (selectPastedContent) {
                range.setStartBefore(firstNode);
            } else {
                range.collapse(true);
            }
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
} else if ( (sel = document.selection) && sel.type != "Control") {
    // IE < 9
var originalRange = sel.createRange();
    originalRange.collapse(true);
    sel.createRange().pasteHTML(html);
    if (selectPastedContent) {
        range = sel.createRange();
        range.setEndPoint("StartToStart", originalRange);
        range.select();
    }
}}

函数粘贴HtmlatCaret（html，选择粘贴内容）{
var-sel，范围；
if（window.getSelection）{
//IE9和非IE
sel=window.getSelection（）；
if（sel.getRangeAt&&sel.rangeCount）{
范围=选择范围（0）；
range.deleteContents（）；
//Range.CreateContexturalFragment（）在这里会很有用，但是
//仅在相对较新的标准化阶段，在中不受支持
//一些浏览器（比如IE9）
var el=document.createElement（“div”）；
el.innerHTML=html；
var frag=document.createDocumentFragment（），节点，lastNode；
while（（node=el.firstChild））{
lastNode=frag.appendChild（节点）；
}
var firstNode=frag.firstChild；
range.insertNode（frag）；
//保留所选内容
如果（最后一个节点）{
range=range.cloneRange（）；
range.setStartAfter（lastNode）；
如果（选择粘贴内容）{
range.setStartBefore（第一个节点）；
}否则{
范围。塌陷（真）；
}
选择removeAllRanges（）；
选择添加范围（范围）；
}
}
}else if（（sel=document.selection）&&sel.type！=“Control”）{
//IE<9
var originalRange=sel.createRange（）；
原始范围。折叠（真）；
sel.createRange（）.pasteHTML（html）；
如果（选择粘贴内容）{
range=sel.createRange（）；
range.setEndPoint（“StartToStart”，原始范围）；
range.select（）；
}
}}

---

我可以使用JQuery，但我真的不想引入任何其他库，比如Rangy。当然，它也必须在IE、Safari、Chrome等中工作。

实现这一功能的最简单更改是向

元素添加一个ID，以允许您获得它，然后再次删除该ID。示例（未测试）：

函数addTitle（）{
var sel=document.getElementById（'htmlbox'）；
var h1Id=“SOME\u RANDOM\u ID”//您可以随机生成此
sel.focus（）；//确保在htmlbox中插入标题
var htmlpaste='在此处插入您的标题\n
'；
pasteHtmlAtCaret（htmlpaste，false）；
//仅选择h1中的文本
var h1=document.getElementById（h1Id）；
var-sel，范围；
if（window.getSelection&&document.createRange）{
//IE9+和非IE
sel=window.getSelection（）；
range=document.createRange（）；
范围。选择节点内容（h1）；
选择removeAllRanges（）；
选择添加范围（范围）；
}else if（document.body.createTextRange）{
range=document.body.createTextRange（）；
范围。移动到元素文本（h1）；
range.select（）；
}
h1.删除属性（“id”）；
}

function addTitle() {
    var sel = document.getElementById('htmlbox');
    var h1Id = "SOME_RANDOM_ID"; // You could generate this randomly
    sel.focus();  // make sure the title gets inserted in the htmlbox
    var htmlpaste = '<h1 id="' + h1Id + '">Insert Your Title Here</h1>\n<br>';
    pasteHtmlAtCaret(htmlpaste, false);

    // Select only the text inside the h1
    var h1 = document.getElementById(h1Id);
    var sel, range;
    if (window.getSelection && document.createRange) {
        // IE9+ and non-IE
        sel = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(h1);
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(h1);
        range.select();
    }
    h1.removeAttribute("id");
}