JSFiddle - React, Tailwind, and code Playground

by tomprogramming

HTML

<div class="contenteditable">
    <span class="content_replaceable" data-replaceable-title="Promotion Headline">Super Exciting Headline!!</span> But this is not editable
</div>

<button id="activateButton">Enable Editing Of Content</button>

CSS

.contenteditable {
-webkit-user-modify:read-only;

    margin:10px;
border: 1px solid #000;   
min-height:20px;    
    outline:0;
    padding:10px;
}

.contenteditable.active {
 -webkit-user-modify:read-write;   
}

.contenteditable:not(.active) .content_replaceable {
    border-bottom: 1px dashed #990;
    cursor: pointer;
    position:relative;
    -webkit-user-modify:read-write;
    outline:0;
    display:inline-block;
    min-width:20px;
        
}

.contenteditable:not(.active) .content_replaceable:hover::after {
content:attr(data-replaceable-title);    
    position:absolute;
    top: 20px;
       right:0px;
    font-size:80%;
    background-color:rgba(248,250,217,1);
    border:1px solid #000;
    padding:3px;
}

JavaScript

$("#activateButton").click(function(){
   $(".contenteditable").addClass("active");
   $(this).attr('disabled','disabled');    
});