JSFiddle - React, Tailwind, and code Playground

by vaibviad

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!
</div>
<p class="border"></p>
Output Box
<div class="outputBox">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!
    </div>
<br>
    <pre></pre>
<br>    
<button>Show Source</button>
<button id="checkbox">Show Content with checkbox</button>

CSS

div{
    background: #eee;
    padding:10px;
}
.border{
    border:1px solid
    
}
pre{
    white-space: pre-wrap;
    background: #000;
    color:#fff;
    padding:10px;
}

JavaScript

$('button').click(function(){
    $('pre').text($('div')[0].outerHTML)
});
$('div[contenteditable=true]').blur(function() {
   
        $('.outputBox').html($(this).html());
   
});

$('div[contenteditable=true]').keydown(function(e) {
    $('.outputBox').html($(this).html());
    // 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)
        $(this).append('<br>');
      document.execCommand('insertHTML', false, '<br>');
        $('.outputBox').html($(this).html());
        //document.execCommand('insertBrOnReturn', false, true);
      // prevent the default behaviour of return key pressed
      return false;
    }
        if (e.keyCode == 8) {
        $('.outputBox').html($(this).html());
        }
    
  });

$('#checkbox').click(function() {
var $p = "";  
     var re = /\S/;
     $p = $('.outputBox');
      $p.contents()
      .filter(function() {
          
        return this.nodeType == 3&& re.test(this.nodeValue);;
          
     })
    .wrap('<label> <input type="checkbox" name="field_1" value="on" />')
   
    

    
});