javascript - Contenteditable 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

要实现此目的，最简单的更改是将 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");
}