JSFiddle - React, Tailwind, and code Playground

HTML

<script src='//cdn.tinymce.com/4/tinymce.min.js'></script>

<textarea id="content" value="sample text" disabled="true" />sample text</textarea>
<br />

<input type="button" id="edit" value="edit" onClick="edit()" />
<input type="button" id="save" value="save" onClick="save()" />

CSS

#content {
    width: 300px;
    height: 200px;
}

#edit, #save {
    padding: 2px;
    width: 50px;   
}

#save {
    display: none;   
}

JavaScript

tinymce.init({
  selector: 'textarea',
  height: 500,
  plugins: [
    'advlist autolink lists link image charmap print preview anchor',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime media table contextmenu paste code'
  ],
  toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
  content_css: [
    '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
    '//www.tinymce.com/css/codepen.min.css'
  ]
});

function edit() {
    document.getElementById('edit').style.display = 'none';
    document.getElementById('save').style.display = 'block';
    document.getElementById('content').disabled = false;
}


function save() {
    document.getElementById('save').style.display = 'none';
    document.getElementById('edit').style.display = 'block';
    document.getElementById('content').disabled = true;
    
}