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

Popular posts from this blog

android - MPAndroidChart - How to add Annotations or images to the chart -

javascript - Add class to another page attribute using URL id - Jquery -

firefox - Where is 'webgl.osmesalib' parameter? -