in Freebies, Plugins, Web Development

How to Create HTML Interactive Editor – WordPress Plugin

Advertisement

I’ve been working on a project where it needed a basic HTML Interactive Editor, and I couldn’t find online according to my need, so I’ve created one and it indeed up great and easy to use.

You’ve mostly seen this HTML Interactive Editor in a tutorial online site, w3schools.com, in there “Try it yourself” button.

Behind the scene

In HTML, we don’t need much fancy compiler to compile and analyze every line our of codes, HTML runs in a browser and that’s all we need.

What we need

<textarea> The textarea can hold a multi-line text input and it’s a perfect tag for our code editor. Instead of just using plain white display from the tag, I’ve added it with a few touches using CodeMirror. CodeMirror is an open-source project shared under an MIT license. It is the editor used in the dev tools for Firefox, Chrome, and Safari.

<iframe> iframe or an inline frame, we’ll be using this for our display container. The inline frame can be used to embed another document within the current HTML document and it’s a perfect tool for our plugin.

Let’s Go

Enqueue scripts and styles

First lets enqueue our scripts and styles files.

// Styles
wp_enqueue_style( 'rs-interactive-style', path_to_css . '/rs-interactive.css', false, '1.0', 'all' );
wp_enqueue_style( 'rs-interactive-codemirror-style', path_to_css . '/codemirror.css', '1.0', 'all' );

// Scripts
wp_enqueue_script( 'rs-interactive-script', path_to_js . '/scripts.js', array( 'jquery' ), '1.0', true );
wp_enqueue_script( 'rs-interactive-codemirror-script', path_to_js . '/codemirror.min.js', array( 'jquery' ), '1.0', true );

wp_enqueue_script( 'rs-interactive-codemirror-xml-script', path_to_js . '/mode/xml/xml.js', array( 'jquery' ), '1.0', true );
wp_enqueue_script( 'rs-interactive-codemirror-htmlmixed-script', path_to_js . '/mode/htmlmixed/htmlmixed.js', array( 'jquery' ), '1.0', true );

Now that our scripts and styles are ready, let’s work our interactive editor page, I’m using shortcode so we have the availability to use it on other pages as well.

PHP

This contain our shortcode snippet.


/**
 * Our Interactive plugin HTML display
 */
function rs_theme_html_interactive() {
<div class="interactive-container">
	
	<div class="interactive-frame">
		<a href="javascript: void(0);" class="btn button small" id="interactiveButton">Save</a>

		<div class="row">
			<div class="col-md-6">
				<div class="iframecontainer">
					<textarea id="textareaCode" name="" id="" cols="30" rows="20">
						<!DOCTYPE html>
						<html>
							<head>
								<title>Page Title</title>
							</head>
							<body>
								<h1>This is a Heading</h1>
								<p>This is a paragraph.</p>
							</body>
						</html>
					</textarea>
				</div>
			</div>
			
			<div class="col-md-6">
				<div class="iframe">
					<div class="top-bar">
						<div class="traffic-light">
							<span></span>
							<span></span>
							<span></span>
						</div>
						<div class="search-bar">
							<blockquote class="wp-embedded-content" data-secret="uQXkPTgwfq"><a href="http://ssct-interactive-learning.com/">Front Page</a></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" src="http://ssct-interactive-learning.com/embed/#?secret=uQXkPTgwfq" data-secret="uQXkPTgwfq" width="600" height="338" title="&#8220;Front Page&#8221; &#8212; Interactive Learning" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
						</div>
					</div>
					<div id="iframewrapper">
						<iframe frameborder="0" id="iframeResult" cols="30" rows="20" name="iframeResult" srcdoc="
						<!DOCTYPE html>
							<html>
								<head>
									<title>Page Title</title>
								</head>
								<body>
									<h1>This is a Heading</h1>
									<p>This is a paragraph.</p>
								</body>
							</html>
						">
						</iframe>
					</div>
				</div>
			</div>
		</div>
		
	</div>

</div>
}

add_shortcode( 'html_interactive', 'rs_theme_html_interactive' );

CSS

Lets add beauty to our iframe display so it will look more engaging to use.


.interactive-container {
 	#interactiveButton {
 		margin-bottom: 1rem
 	}

 	// Code loader display
 	.iframe {
 		background-color: #fff;
	    border-radius: 0.4rem;

	    .top-bar {
	        background-color: #e7ecf0;
		    width: 100%;
		    padding: 0.2rem;
		    border-top-right-radius: .3rem;
		    border-top-left-radius: .3rem;

		    .traffic-light {
		    	float: left;

		    	span {
		    		float: left;
		    		margin-top: 0.2rem;
    				margin-left: 0.2rem;
		    		background-color: #fff;
		    		border-radius: 10rem;
		    		width: 8px;
		    	 	height: 8px;
		    	 	display: inline-block;

		    	 	&amp;:nth-child(1) {
		    	 		background-color: #f88a83;
		    	 	}
		    	 	&amp;:nth-child(2) {
		    	 		background-color: #fcd072;
		    	 	}
		    	 	&amp;:nth-child(3) {
		    	 		background-color: #7ae793;
		    	 	}
		    	}

		    	&amp;::after {
			    	content: "";
			    	display: table;
			    	clear: both;
		    	}
		    }

		    .search-bar {
		        margin: 0 auto;
			    padding: 0 0.6rem;
	    	    background-color: #fff;
			    width: 50%;
			    font-size: .6rem;
			    border-radius: 0.2rem;
		    }
	    }

	    #iframewrapper {
	    	padding: 1rem;

		 	iframe {
		 		width: 100%;
		 	}
	 	}
	 
 	}
 }

That’s it, happy coding ^_^

Advertisement

Related Articles