Personal Online PHP HTML Editor Source Code

Today, We want to share with you Personal Online PHP HTML Editor Source Code.
In this post we will show you Online PHP Code Editor, hear for How to Create a Personal Online PHP Editor we will give you demo and example for implement.
In this post, we will learn about PHP Online Editor – PHP Online IDE – PHP Coding Online with an example.

Personal Online PHP HTML Editor Source Code

There are the Following The simple About Personal Online PHP HTML Editor Source Code Full Information With Example and source code.

As I will cover this Post with live Working example to develop , so the some major files and Directory structures for this example is following below.

  • index.php
  • live-file-set.php
  • code-editable.php
  • editor-action.js
  • style.css
READ :  Vuejs Dynamic Displaying Lists v-for directive

Converting HTML Textarea into Code Editor

index.php

This is where I will make a simple HTML form and PHP server side source code for our web application. To make the forms simply all souce code copy and write it into your any text editor Like Notepad++, then save file it as index.php.

<!DOCTYPE html>
<html>
<head>
	<title>Editor</title>
    <link rel="stylesheet" type="text/css" href="assets/assets.css">
    <link rel="stylesheet" type="text/css" href="assets/theme/ambiance.css">
    <script src="assets/jQuery/jQuery.js"></script>
    <script src="assets/assets.js"></script>
  	<link rel="stylesheet" type="text/css" href="style.css">
  	<script src="editor-action.js"></script>
    <script src="assets/mode/htmlmixed/htmlmixed.js"></script>
    <script src="assets/mode/xml/xml.js"></script>
    <script src="assets/mode/javascript/javascript.js"></script>
    <script src="assets/mode/css/css.js"></script>
    <script src="assets/mode/clike/clike.js"></script>
    <script src='assets/mode/php/php.js'></script>
    <script src='assets/addon/selection/active-line.js'></script>
    <script src='assets/addon/edit/matchbrackets.js'></script>
</head>
<body>
<div class="row">
    <textarea class="codemirror-textarea" id="code-editor"></textarea>
    <div class="add-new-rec">
        <button class="live-btn-option" id="run">Run</button>
        <button class="live-btn-option" id="clear">Clear</button>
        <button class="live-btn-option" id="refresh">Refresh</button><span id="live_err"></span>
    </div>
</div>
<div class="add-new-rec">	
  <div id="preview"></div>
</div>	
    
</body>
</html> 

Set Online PHP editable

code-editable.php

<?php
echo "PHP Pakainfo.com Hello World!"
?>

PHP Write Editor Source code to a File Dynamically

live-file-set.php

<?php
$fp = fopen("code-editable.php", "w") or die("Unable to open file!");
$sourceCode = $_POST['input'];
fwrite($fp, $sourceCode);
fclose($fp);
?>

Online Editor using jQuery AJAX

editor-action.js – Executing Code with Online Editor using jQuery AJAX

$(document).ready(function(){
	var codeEditorElement = $(".codemirror-textarea")[0];
    var livechk = CodeMirror.fromTextArea(codeEditorElement, {
        mode: "application/x-httpd-php",
        lineNumbers: true,
        matchBrackets: true,
        theme: "ambiance",
        lineWiseCopyCut: true,
        undoDepth: 200
      });
    livechk.setValue('<?php\necho "PHP Pakainfo.com Hello World!"\n?>');

	$(document).on('click', '#run', function(e){
		e.preventDefault();
		$("#live_err").html("").hide();
		var sourceCode = livechk.getValue();
		if(sourceCode != ''){
		$.ajax({
			url: 'live-file-set.php',
			type: 'POST',
			dataType: 'json',
			data: {"input":sourceCode},
			success:function(output_results){
			},
			complete:function(){
				$.ajax({
					url: 'code-editable.php',
					type: 'GET',
					success:function(output_results){
						console.log("output_results:  "+output_results);
						$("#preview").html(output_results)	;
					},
					error:function(){
						console.log("live_err: "+output_results);
						}
					});	
				}
			});

		} else{
			$("#live_err").html("Sorry, Code should not be empty").show();
		}

	});

	$(document).on('click', '#clear', function(e){
		e.preventDefault();
		$("#live_err").html("").hide();
		livechk.setValue('');
	});

	$(document).on('click', '#refresh', function(e){
		e.preventDefault();
		$("#live_err").html("").hide();
		location.reload();
	});
});

Custom Style CSS

style.css

body {
    font-family: Arial;
}
.live-btn-option {    
    background: #1f201f;
    padding: 8px 25px;
    margin-right: 10px;
    border: #101010 2px solid;
    color: #ccc;
}
.add-new-rec {
    margin-top: 20px;
}

#preview {
    border: #d0d0d0 2px solid;
    padding: 10px;
    min-height: 100px;
}

#live_err {
    display:none;
    color: #d63f3f;
}

Personal Online PHP HTML Editor – Output

personal-online-php-editor-output

jQuery 15 Powerful Tips and Tricks for Developers and Web Designer

Read :

READ :  vuejs Dynamic component HTML Templates data

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Create a Personal Online PHP HTML Editor.
I would like to have feedback on my Infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Add a Comment

Your email address will not be published. Required fields are marked *