Question

我有一个contentEditable div：

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

我希望发生的是当用户开始输入一些文字时，我希望该文字包含在div或p标签中。我可以将html添加到＆＃34;内容＆＃34; 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中执行此操作。我对这个内容可爱的div很新，所以我试图抓住它。

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

Answer 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();

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

1 个答案: