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

Contenteditable div选择标题标签中的文本

1 个答案: