javascript - Wrap user input text in a created element inside contentEditable div -
i have contenteditable div so:
<div id="content" contenteditable="true"></div>
what have happen when user starts typing text, want text wrapped within div
or p
tags. can add html "content" div typing done outside created div.
function keypress(e) { if (e == 'undefined') e = window.event; var target = e.target || e.srcelement; if (e.keycode === 13) { //close div or p tag or exit out of } } 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 div typing outside newly created tag } }
right when start typing inside div, text isn't wrapped. if press enter , start typing again, second line text wrapped in div. want have control start first line text wrapped well. if user pushes insert image button, previous text should end closing tag. i'm doing in chrome right now. i'm new contenteditable div i'm trying hang of it.
update: more , more playing around, guess i'm ok keeping functionality of contenteditable. thing have problem initial text written not enclosed within tags. if press enter, next line enclosed within div
tags. how can enclose first text within div
keep functionality standard?
the workaround came with, , it's not perfect, disable default functionality of contenteditable
, wrap onblur:
function keypress(e) { if (e.keycode === 13) { document.execcommand("inserthtml", false, "<br><br>"); return false; } } function wraptext(_callback) { var target = $id("content"); (var = 0; < 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();
Comments
Post a Comment