JSFiddle - React, Tailwind, and code Playground

by Luke Marlow

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.ckeditor.com/4.5.9/standard/ckeditor.js"></script>
<textarea name="comment" id="comment"></textarea>
<div class="outer"></div>

CSS

#comment {
  width: 100%;
  height: 300px
}

JavaScript

function load_CKEEDITOR_instanceLoaded() {

	CKEDITOR.on('instanceLoaded', function(e) {

    e.editor.on('contentDom', function() {

      e.editor.document.on('keydown', function(event) {
        var keyCode = event.data.$.keyCode;

        if (keyCode == 18) {
          ALT_DOWN = true;
        }

        if (ALT_DOWN && keyCode == 13) {

					var comment_content = CKEDITOR.instances.comment.getData();
          $('.outer').html(comment_content);

          CKEDITOR.instances['comment'].setData('');
          
          setTimeout(function() {
          	load_CKEEDITOR_instanceLoaded();
          }, 1000);

          event.data.preventDefault();

        }
      });

      e.editor.document.on('keyup', function(event) {
        var keyCode = event.data.$.keyCode;

        if (keyCode == 18) {
          ALT_DOWN = false
        }
      });
    });
  });
}

load_CKEEDITOR_instanceLoaded();

CKEDITOR.replace(
	'comment', {
  	toolbar: [
    	['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'], {
      	name: 'basicstyles',
      	items: ['Bold', 'Italic']
    	}
  	]
 	}
);