2

In the example below, entering HTML into the contenteditable div should render as HTML inside #html_view, but instead of rendering as HTML it is rendering as text.

For example: when entering the following HTML, it should render "sometext" inside a red container but the string is transferred as is.

<p style="background-color:red;">sometext</p>

How can I render the content of a contenteditable div as HTML inside another element?

function move_to_the_other_div(el){
 document.getElementById('html_view').innerHTML = el.innerHTML;
}
#html_view{
  width:300px;
  overflow:hidden;
  border:1px solid gray;
  padding:10px;
  min-height:50px;
}
#code_view{
  width:300px;
  border:1px solid gray;
  padding:10px;
  min-height:50px;
  font-size:18px;
}
<div id="html_view"></div>
<div contenteditable id="code_view" oninput="move_to_the_other_div(this);" onpaste="move_to_the_other_div(this);"></div>
mdnfiras
  • 882
  • 1
  • 15
  • 28

1 Answers1

6

You need to grab the data from your el using .innerText instead

The reason being, when you retrieve the information via innerHTML it will pull the HTML information from your input field, however, the HTML that you have written is in plain-text, so there are no HTML elements. Therefore, you have to grab the plain-text and set the innerHTML of your target div to the string containing the HTML, instead of the HTML syntax currently in the input field.

It should also be noted that innerText does not work with FireFox

For Cross-Browser compatibility I would suggest using textContent instead

textContent

function move_to_the_other_div(el){
    document.getElementById('html_view').innerHTML = el.textContent;
}

innerText

function move_to_the_other_div(el){
    document.getElementById('html_view').innerHTML = el.innerText;
}


function move_to_the_other_div(el){
 document.getElementById('html_view').innerHTML = el.innerText;
}
#html_view{
  width:900px;
  overflow:hidden;
  border:1px solid gray;
  padding:10px;
  min-height:320px;
}
#code_view{
  width:900px;
  border:1px solid gray;
  padding:10px;
  min-height:320px;
  font-size:18px;
}
<div id="html_view"></div>
<div contenteditable id="code_view" oninput="move_to_the_other_div(this);" onpaste="move_to_the_other_div(this);"></div>
Adjit
  • 10,134
  • 12
  • 53
  • 98
  • 1
    innerText is not html standard it only solve your problem in ie but not other browsers. http://stackoverflow.com/questions/19030742/difference-between-innertext-and-innerhtml-in-javascript – Du D. Sep 09 '15 at 16:19
  • @DuD. updated the answer for cross-browser compatibility – Adjit Sep 09 '15 at 16:25
  • `innerText` works fine for me on chrome but i will use `textContent` as you suggested. Thanks alot! – mdnfiras Sep 09 '15 at 16:28
  • @Adjit it looks good. May be use this for – Du D. Sep 09 '15 at 16:30
  • 1
    Here is a [demonstration of the execution of innerHTML and textContent](http://jsbin.com/seyiqi/1/edit?html,js,output) –  Sep 09 '15 at 17:51
  • I used the jquery $(el).text(). Very easy. Don't know about it's compatibility with standards as mentioned above. Perhaps others can comment on that. – Laran Evans Jan 30 '16 at 06:54