JSFiddle - React, Tailwind, and code Playground

by xilibit

HTML

<script src="https://cdn.ckeditor.com/4.21.0/full-all/ckeditor.js"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<div id="editor">
[[email protected]]John Doe[/email]
</div>

JavaScript

// If you want to use this template, please follow the following steps:
// 1. Fork it.
// 2. Add your JS code here, e.g. custom plugins.
// 3. If you want to change the default CKEditor 4 version, you can do it in the sidebar on the left, inside "Resources" section.

jQuery(document).ready(function ($) {
	CKEDITOR.replace('editor', {
			smiley_descriptions:"",
      toolbarGroups : [
		{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
		{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
		{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
		{ name: 'forms', groups: [ 'forms' ] },
		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
		{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
		{ name: 'links', groups: [ 'links' ] },
		{ name: 'insert', groups: [ 'insert' ] },
		{ name: 'social', groups: [ 'social' ] },
		{ name: 'styles', groups: [ 'styles' ] },
		{ name: 'colors', groups: [ 'colors' ] },
		{ name: 'tools', groups: [ 'tools' ] },
		{ name: 'others', groups: [ 'others' ] },
		{ name: 'about', groups: [ 'about' ] }
	],
      extraPlugins: 'bbcode',
      linkDefaultProtocol: 'https://',
      fontSize_sizes: "50/50%;85/85%;100/100%;150/150%;200/200%",
			on: {
				instanceReady: function (event) {
					CKEDITOR.plugins.clipboard.preventDefaultDropOnElement(event.editor.document);
					
					if (event.editor.getData().length > 0)
					{
						$('#form_submit_button').removeAttr("disabled");
					}

					event.editor.on("beforeCommandExec", function (event) {
                        // Show the paste dialog for the paste buttons and right-click paste
                        if (event.data.name == "paste") {
                            event.editor._.forcePasteDialog = true;
                        }

                        // Don't show the paste dialog for Ctrl+Shift+V
                        if (event.data.name == "pastetext" &&...