Simple WYSIWYG with Ace Editor

The Ace Editor is a powerful standalone code editor for the web. It comes with Syntax highlighting, live preview and code debugging features. This code snippet helps you to integrate Ace Editor in your web project with WYSIWYG (What You See Is What You Get) and live preview window in a simple way.

How to Create Simple WYSIWYG with Ace Editor

1. First of all, load the Ace Editor JS and Font Awesome Kit into the head tag of your HTML document.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/ace.js"></script>
<script src="https://use.fontawesome.com/1bc4308c1f.js"></script>

2. After that, create a div element with a unique ID “coder” and place your HTML escaped code that you want to display on first initialization of the code editor. Similarly, create another div element with an ID “preview” and keep it blank.

The code preview will be rendered in this div with the help of iframe. Wrap both div elements into a div tag and define its id “wrap”. The complete HTML structure for the WYSIWYG editor is as follows:

<div id="wrap">

<div id="status">
	<p><i class="fa fa-spinner fa-spin fa-fw"></i> generating preview</p>
</div>
	
<div id="coder">&lt;html&gt;	
&lt;head&gt;	
	&lt;style&gt;
		body{
			font-family:'Verdana', sans-serif;
			background:turquoise;
		}
		.someDiv{
		padding:10px;
		margin:20px;
		display:inline-block;
		background:orange;
		}
	&lt;/style&gt;
&lt;/head&gt;
	
&lt;body&gt;
&lt;h1&gt;This is the preview.&lt;/h1&gt;

&lt;div class="someDiv"&gt;
    Welcome to CodeHim 
&lt;/div&gt;
	
&lt;/body&gt;
&lt;/html&gt;</div>

<div id="preview"></div>

</div>

3. Style the editor using the following CSS. You can customize the layout, fonts, and colors according to your needs.

*{margin:0;padding:0;box-sizing:border-box;}

body,html{
	height:100%;
}

#wrap{
	height:100%;
	position:relative;
	padding:0px 50px;
	background:#ccc;
        width: 800px;
}

#coder{ 
	display:block;
	position:relative;
	width: 400px;
	height:400px;
        float:left;
}
#preview{
	display:block;
	position:relative;
	width: 400px;
        height: 400px;
        float: left;
	background:#fff;
}
	#preview iframe{
		width:100%;
		height:100%;
		border:none;
	}
#status{
	padding:25px 0;
	height:50px;
}

4. Now, load the jQuery JavaScript library by adding the following CDN link before the closing of the body tag.

<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

5. Finally, initialize the Ace Editor with the following congratulation options and done.

var editor = ace.edit("coder");
// editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/html");
editor.getSession().setUseWorker(false);

function myFunction(){	
	
	$("#status p").delay(500).fadeOut(200);
	
	var code = editor.getValue();
	
	var iframe = document.createElement('iframe');
	
	var preview = document.getElementById('preview');
	var content = '<!doctype html>' + code;

	preview.appendChild(iframe);

	iframe.contentWindow.document.open('text/htmlreplace');
	iframe.contentWindow.document.write(content);
	iframe.contentWindow.document.close();
	
	// $("#preview").html(code);
	
}

myFunction();

var timeout;

$('#search-form .search-terms').on('keydown', function(e){
    // get keycode of current keypress event
    var code = (e.keyCode || e.which);

    // do nothing if it's an arrow key
    if(code == 37 || code == 38 || code == 39 || code == 40) {
        return;
    }

    // do normal behaviour for any other key
    $('#search-items #autocom').fadeIn();
});

$("#coder").on('keyup', function() {
	
	$("#status p").fadeIn(200);
	
	console.log("yea");

	if(timeout) {
		clearTimeout(timeout);
		timeout = null;
	}

	$("#preview").empty();
	timeout = setTimeout(myFunction, 500)

});

That’s all! hopefully, you have successfully created a simple WYSIWYG with Ace Editor. If you have any questions or suggestions, feel free to comment below.

Similar Code Snippets:

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.

Code Snippet:	Simple WYSIWYG with Ace Editor
Author:	marcruecker
Published:	January 16, 2024
Last Updated:	January 22, 2024
Downloads:	2,493

License:	MIT
Edit Code online:	View on CodePen

How to Create Simple WYSIWYG with Ace Editor

Similar Code Snippets:

Leave a Comment Cancel reply