javascript - write html code in div and see result instantly -

javascript - write html code in div and see result instantly -

how setup div see instant result of html making div contenteditable. like

<div id="edit" contenteditable="true"></div> <button id="trigger">apply code</button>

here, div id="edit" assumed editor , result viewer itself. e.g. write code on div click on "apply code" button , result of html code written in div should appeared within same div (i.e. div id="edit").

so here's basic setup of you're trying do...

<div id='editor' contenteditable></div> <button id='trigger' value='apply'>

and js code:

document.getelementbyid('trigger').addeventlistener('click', (function(dv) { homecoming function() { dv.innerhtml = dv.textcontent; }; }(document.getelementbyid('editor'))), false);

here's fiddle. play around it, , you'll find out there's problem it: seek adding markup tags, , edit input sec time. that's not going work you'd hope. check out resulting dom, after user puts in multi-line input: new divs, paragraphs , have added. you'll have preserve markup, using like:

document.queryselector('#editor').addeventlistener('click', function() { var currentmarkup = this.innerhtml; }, false);

then, you'll have set sharing innerhtml trigger event handler, , find way check if user changed actual markup. have fun that...

i suggest utilize tools have been written, tried , tested, instead of setting building own. it'll take long, , you'll end that's not half capable existing editors out there.

check related post details: replace words of text area

javascript jquery html css