Question

基本上我需要在第一个contentEditable div中创建一个段落元素。

<div id="contentEdit" contenteditable="true">
    <p>
        <figure id="figure" contenteditable="false">
            <figcaption class="_picCaption" contentEditable="true">
                image caption
            </figcaption>
        </figure>
    </p>
</div>

我需要做的是，当用户完成编辑标题以在“contentEdit”中创建一个段落元素时，这是第一个Div。有什么想法吗？

$(document).on("keydown", "#contentEdit", function(e) {
    e.stopPropagation();
    var element = cp_getSelectionBoundaryElement(true);

    if ((e.which || e.keyCode) == 13) {
        if (element.tagName == "FIGCAPTION") {
            e.preventDefault();
            // get the selection range (or cursor     position)
            var range = window.getSelection().getRangeAt(0);

            // create a p
            var newElement = document.createElement('p');
            newElement.className = '_graf_p';

            // if the range is in #contentEdit 
            if (range.startContainer.parentNode.className === '_picCaption') {
                // delete whatever is on the range
                range.deleteContents();

                // place your p
                range.insertNode(newElement);
            }
        }
    }
});

发生了什么，我正在标题内创建p元素。我不知道如何获得figcaption祖父母的范围。

Answer 1

您实际上不必使用范围，只需将#contentEdit内的所有元素都包含p元素。

使用普通JS，您应该将#contentEdit内的所有元素移动到新的p元素，然后将其放回#contentEdit：

var content = document.getElementById('contentEdit');
var newElement = document.createElement('p');

while (content.firstChild) {
  newElement.appendChild(content.firstChild);
}

content.appendChild(newElement);

如何在第一个contenteditable中创建一个元素

1 个答案: