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

I have a contentEditable div as so:

我有一个contentEditable div如下:

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

What I would like to have happen is when the user starts typing some text, I want that text to be wrapped within a div or p tags. I can add html to the "content" div but the typing is done outside the created div.

我想要发生的是当用户开始键入一些文本时,我希望该文本包含在div或p标签中。我可以将html添加到“content”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
    }
}

Right now when I start typing inside the div, the text isn't wrapped. If I press enter and start typing again, the second line text is wrapped in a div. I want to have control from the start so the first line text will be wrapped as well. Also if the user pushes the insert image button, the previous text should end with a closing tag. I'm doing this in Chrome right now. I'm new with this contentEditable div so I'm trying to get the hang of it.

现在当我开始在div中输入时,文本没有被包装。如果我按回车键并再次开始输入,则第二行文本将包含在div中。我希望从一开始就有控制权,所以第一行文本也将被包装。此外,如果用户按下插入图像按钮,则前一个文本应以结束标记结束。我现在正在Chrome中这样做。我是这个contentEditable div的新手,所以我试图抓住它。

UPDATE: From more and more playing around, I guess I'm ok with keeping the functionality of contentEditable. The only thing I have a problem with is the initial text which is written is not enclosed within any tags. If I press Enter, the next line is enclosed within div tags. How can I enclose the first text within div but keep the functionality standard?

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

1 个解决方案

#1

The workaround I came up with, and it's not perfect, is to disable default functionality of contentEditable and wrap everything onblur:

我提出的解决方法,并不完美,是禁用contentEditable的默认功能并将所有内容包装在onblur上:

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