JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://premiumsoftware.net/cleditor/jquery.cleditor.css">
<script src="http://premiumsoftware.net/cleditor/jquery.cleditor.min.js"></script>

<textarea id="input" name="input"></textarea>

JavaScript

var aaaaa;

(function($) {


  // Define the hello button
  $.cleditor.buttons.video = {
    name: "video",
    
    title: "Insert Video",
    command: "inserthtml",
    buttonClick:videoClick
  };


  // Add the button to the default controls before the bold button
  $.cleditor.defaultOptions.controls = $.cleditor.defaultOptions.controls
    .replace("bold", "video bold");


  // Handle the hello button click event
  function videoClick(e, data) {

        // Get the editor
        var editor = data.editor;
        console.log(data)
        // Insert some html into the document
        var html = "<div>VIDEO</div>";
              editor.focus();
        editor.execCommand(data.command, 'ssss',null,data.button);


        // Hide the popup and set focus back to the editor
        aaaaa = editor.doc;
        editor.focus();
        
      return false;
  }


})(jQuery);



$(document).ready(function() {
        $("#input").cleditor();
      });