内容可编辑的 div 选择标题标签中的文本

Question

我有一个内容可编辑的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); }

哪些调用

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();
    }
}}

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

Answer 1

完成此操作的最简单更改是将 ID 添加到 <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");
}