JSFiddle - React, Tailwind, and code Playground

by j_swiderski

HTML

<script src="//cdn.ckeditor.com/4.4.7/full/ckeditor.js"></script>
<link rel="stylesheet" href="//cdn.ckeditor.com/4.4.7/full/samples/sample.css">
	<h1 class="samples">
		<a href="index.html">CKEditor Samples</a> &raquo; Replace Textarea Elements Using JavaScript Code
	</h1>
	<form id="myform" action="sample_posteddata.php" method="post">
		<div class="description">
			<p>
				This editor is using an <code>&lt;iframe&gt;</code> element-based editing area, provided by the <strong>Wysiwygarea</strong> plugin.
			</p>
<pre class="samples">

CKEDITOR.replace( '<em>textarea_id</em>' )
</pre>
		</div>
		<textarea cols="80" id="editor1" name="editor1" rows="10"> 
            <p>Please click into any word except "spaceflight" and press e.g. key 'A' on the keyboard. You will notice that first "spaceflight" gets wrapped into span (use e.g. Firebug) and cursor position stays.</p>
		</textarea>			

			
		<p>
			<input type="submit" value="Submit">
		</p>
	</form>
	<div id="footer">
		<hr>
		<p>
			CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
		</p>
		<p id="copy">
			Copyright &copy; 2003-2013, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
			Knabben. All rights reserved.
		</p>
	</div>
</body>
</html>

JavaScript

(function () {
            var checkTimeout;
            var bookmark;

            var storeCursorLocation = function( editor ) {
               bookmark = editor.getSelection().createBookmarks( true );
            };

            var restoreCursorLocation = function( editor ) {
				editor.focus();
                editor.getSelection().selectBookmarks( bookmark );
            };

            var validateText = function( editor ) {
                storeCursorLocation( editor );
				
				var data = editor.document.getBody().getHtml();
                data = data.replace( "spaceflight", "<span class='err-item'>spaceflight</span>" );
                editor.document.getBody().setHtml( data );
				restoreCursorLocation( editor );
				//fire this event after DOM changes if working with widgets
				//editor.fire( 'contentDomInvalidated' ); 
            };


           var editor = CKEDITOR.replace( 'editor1', {
				extraAllowedContent : 'span(err-item)',				
                on: {
                    "pluginsLoaded" : function( event ){
						editor.on( 'contentDom', function() {
							var editable = editor.editable();					
							editable.attachListener( editable, 'keyup', function( e ) { 
								clearTimeout( checkTimeout );
								checkTimeout = setTimeout(function () {
									validateText( editor );
								}, 1000 );
							});
						});
					}
                }
            });
        })();