将用户输入文本包装在 contentEditable div 内的已创建元素中答案

【问题标题】：Wrap user input text in a created element inside contentEditable div将用户输入文本包装在 contentEditable div 内的已创建元素中
【发布时间】：2015-05-11 16:42:13
【问题描述】：

我有一个 contentEditable div：

<div id="content" contentEditable="true"></div>

我希望当用户开始输入一些文本时，我希望将该文本包裹在 div 或 p 标记中。我可以将 html 添加到“内容”div，但输入是在创建的 div 之外完成的。

function keyPress(e) {
    if (e == 'undefined') e = window.event;
    var target = e.target || e.srcElement;
    if (e.keyCode === 13) {
        //close the div or p tag or just exit out of it
    }
}
function mainFocus(e) {
    if (e == 'undefined') e = window.event;
    var target = e.target || e.srcElement;
    if (!target.innerHTML) {
        //var div = document.createElement("div");
        //$id("content").appendChild(div);
        //or $id("content").execCommand("insertHTML", false, "div");
        //inserts the div but typing is outside the newly created tag
    }
}

现在，当我开始在 div 中输入内容时，文本没有被换行。如果我按回车键并再次开始输入，第二行文本将包含在一个 div 中。我想从一开始就拥有控制权，因此第一行文本也将被换行。此外，如果用户按下插入图像按钮，前一个文本应该以结束标记结束。我现在正在 Chrome 中执行此操作。我是这个 contentEditable div 的新手，所以我正在尝试掌握它。

更新：从越来越多的游戏中，我想我可以保持 contentEditable 的功能。我唯一遇到的问题是所写的初始文本没有包含在任何标签中。如果我按 Enter，下一行将包含在 div 标记中。如何在 div 中包含第一个文本但保持功能标准？

【问题讨论】：

标签： javascript html css

【解决方案1】：

我想出的解决方法，但并不完美，是禁用contentEditable 的默认功能并将所有内容包装在模糊上：

function keyPress(e) {
            if (e.keyCode === 13) {
                document.execCommand("insertHTML", false, "<br><br>");
                return false;
            }
        }
        function wrapText(_callback) {
            var target = $id("content");
            for (var i = 0; i < target.childNodes.length; i++) {
                (function(i) {
                    var curNode = target.childNodes[i];
                    if (curNode.nodeName === "#text") {
                        var element = document.createElement("span");
                        element.setAttribute("id", i);
                        target.insertBefore(element, curNode);
                        element.appendChild(curNode);
                    }
                })(i);
            }
            _callback();

【讨论】：