My current setup includes a contentEditable div like this:
<div id="content" contentEditable="true"></div>
What I want to achieve is for any text typed by the user to be automatically wrapped within div or p tags. While I can add HTML code to the "content" div, the typing itself occurs outside of the created element.
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
}
}
Currently, text entered inside the div does not get wrapped with tags until Enter is pressed for a new line. My goal is to wrap the initial text as well and ensure that previous text ends with a closing tag when inserting an image. This behavior is observed in Chrome, and I'm still exploring the potential of contentEditable div elements.
UPDATE: After further experimentation, I am comfortable with the functionality of the contentEditable field. My only concern remains that the initial text lacks enclosing tags, which are added automatically for subsequent lines. How can I enclose the first line of text within div tags while maintaining standard functionality?