JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/tinymce/4.4.1/tinymce.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>

<div id="ta">
  <p>This is the content that I have</p>
</div>
<button id="btn1">Get content with tinymce</button><br /><br />
<button id="btn2">Get content with the help of jQuery (still using tinymce)</button><br /><br />
<button id="btn3">Get content Only with jQuery <span style="background: red; color: white;">(Dont really use this!)</span></button>

JavaScript

$(function() {
    tinymce.init({
        selector: "#ta",
        contextmenu: false,
        plugins: "textcolor link",
        font_formats: "Sans Serif = arial, helvetica, sans-serif;Serif = times new roman, serif;Fixed Width = monospace;Wide = arial black, sans-serif;Narrow = arial narrow, sans-serif;Comic Sans MS = comic sans ms, sans-serif;Garamond = garamond, serif;Georgia = georgia, serif;Tahoma = tahoma, sans-serif;Trebuchet MS = trebuchet ms, sans-serif;Verdana = verdana, sans-serif",
        toolbar: "fontselect | fontsizeselect | bold italic underline | forecolor | numlist bullist | alignleft aligncenter alignright alignjustify | outdent indent | link unlink | undo redo"
    });

    $('#btn1').click(function() {
        console.log(tinyMCE.activeEditor.getContent());
    });
    
    $('#btn2').click(function() {
        console.log(tinyMCE.editors[$('#ta').attr('id')].getContent());
    });
    
    $('#btn3').click(function() {
        alert('You should really NOT use this option');
        console.log($('#ta_ifr')[0].contentDocument.body.innerHTML);
    });
});