Simple WYSIWYG with Ace Editor

Simple WYSIWYG with Ace Editor
Code Snippet:Simple WYSIWYG with Ace Editor
Author: marcruecker
Published: January 16, 2024
Last Updated: January 22, 2024
Downloads: 2,178
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...