JSFiddle - React, Tailwind, and code Playground

by Tân Nguyễn

HTML

<div contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor veniam asperiores laudantium repudiandae doloremque sed perferendis obcaecati delectus autem perspiciatis aut excepturi et nesciunt error ad incidunt impedit quia dolores rerum animi provident dolore corporis libero sunt enim. Ad magnam omnis quidem qui voluptas ut minima similique obcaecati doloremque atque!
<br><br>
Type some stuff, hit ENTER a few times, then press the button.
</div>
<pre></pre>
<button>Show Source</button>

CSS

div{
    background: skyblue;
    padding:10px;
}

pre{
    white-space: pre-wrap;
    background: #EEE;
}

JavaScript

$('button').click(function(){
    $('pre').text($('div')[0].outerHTML)
});

$('div[contenteditable=true]').keydown(function(e) {
    // trap the return key being pressed
    if (e.keyCode == 13) {
      // insert 2 br tags (if only one br tag is inserted the cursor won't go to the second line)
      //document.execCommand('insertHTML', false, '<br><br>');
      // prevent the default behaviour of return key pressed
      $('pre').text($('div')[0].outerHTML)
      return false;
    }
  });