JSFiddle - React, Tailwind, and code Playground

by Wesley doew

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Teste</title>
        <meta charset="utf-8">
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <style>
        </style>
                
    </head>
 
    <body>
  <input type="button" onClick="ctexto()"  value="Texto">
       <div name="editavel" id="editavel" >
    </body>

</html>

CSS

#editavel {
    border: 2px solid aqua;
  
}

JavaScript

function ctexto() {
    
    document.getElementById("editavel").innerHTML =
   '<div id="" class="ui-widget-content, draggable">Arrastar<div  id="divv" class="" contenteditable="true" >Este Ă© um texto de teste</div></div>';
        
         $(".draggable")
    .draggable()
    .click(function(){
        if ( $(this).is('.ui-draggable-dragging') ) {
            return;
        }
        $(this).draggable( "option", "disabled", true );
        $(this).attr('contenteditable','true');
        $(this).attr('resizable','false');
            
    })
    .blur(function(){
        $(this).draggable( 'option', 'disabled', false);
        $(this).attr('contenteditable','false');
    });
}