JSFiddle - React, Tailwind, and code Playground

by vinodlouis

HTML

<script src="https://cdn.ckeditor.com/ckeditor5/12.4.0/classic/ckeditor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>CKEditor 5 Example</h1>

<textarea id="editor1"></textarea>

<p>
For more information, see <a href="https://ckeditor.com/docs/ckeditor5/latest/features/link.html">CK Editor 5 Links</a>.
</p>

JavaScript

ClassicEditor.create(document.querySelector('#editor1'), {
		link: {
			decorators: {
				checkClass: {
					mode: 'automatic',
					callback: function (url) {
						setTimeout(function () {

							// valid class list
							var validClassList = ["style1", "style2"];

							var linkElement = $(".ck.ck-content").find("li");

							// split the linked class in the current link
							var splitClass = linkElement.attr("class").split(" ");

							var commonClass = validClassList.filter(value => -1 !== splitClass.indexOf(value));

							
							if (commonClass.length)
								linkElement.removeClass("defaultClass");
							else
								linkElement.addClass("defaultClass");

						}, 500);

						return true;

					},
					attributes: {
						class: 'defaultClass',
					}
				},
				addClassStyle1: {
					mode: 'manual',
					label: 'Style 1',
					attributes: {
						class: 'style1',
					}
				},
				addClassStyle2: {
					mode: 'manual',
					label: 'Style 2',
					attributes: {
						class: 'style2',
					}
				},
			}
		}
	})
		.then(function (editor) {
			console.log(editor);
		})
		.catch(function (err) {
			console.error(err.stack);
		});