JSFiddle - React, Tailwind, and code Playground

by SHELDON PASCIAK

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jodit/3.4.26/jodit.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jodit/3.4.26/jodit.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
 <div>
         <div>
          Click on the image tool.  Can edit url input field.
          </div>
          <div id="editor1"></div>    

   <button onclick="$('#dialog').modal( 'show' );">
   Show modal with editor
   </button>
 </div>
 <div id="dialog" class="modal" tabindex="" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
      
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        
        <div class="modal-body">

          <div>
          Click on the image tool.  Can't edit url input field.
          </div>
          <div id="editor2"></div>    

        </div>
        
      </div>
    </div>
  </div>

JavaScript

var editor1 = new Jodit( '#editor1' );
var editor2 = new Jodit( '#editor2' );

/* 

(( note the image tool dialog does not work in modal unless fixed by the below....))

https://jsfiddle.net/sheldon_pasciak/meufps8d/

*/

/* note by setting tabindex="-1" it doesn't work */
/* note by setting tabindex="" it works */