可內容編輯的div在標題標簽中選擇文本

Question

我有一個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); }

哪個電話

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

進行此工作的最簡單的更改是在<h1>元素中添加一個ID，以使您可以保留它，然后再次刪除該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");
}