Last modified on August 20th, 2018 by Vincy.
Online editors has cool advantages like, providing live preview of the code and ease of use. Writing the code online in the web browser and executing it on the go provides an amazing experience. It greatly reduces the effort of downloading and installing the software for setting up the local environment to run the codes. It will also be useful to troubleshoot code snippets intuitively.
Note: This example is designed in such a way that, you can deploy in your local environment for your personal use only. This needs to be enhanced to a large extent to put it into public use.
In this online PHP editor example, an editor will be shown on the landing page. Initially, it is loaded with the PHP hello world program. The code in the editor window is editable and the Run action will take the current code from the editor. Also, we can clear and reload the editor window by clicking the Clear and Refresh button controls respectively. These Run, Refresh and Clear actions are performed using jQuery AJAX.
Converting HTML Textarea into Code Editor
This is the HTML code for showing the landing page with an online text editor. Download CodeMirror and integrate it by including the library files that are required to show the editor. By integrating this library, a HTML form text area element can be converted as an editor window.
This editor window is populated with a sample code. By clicking the Run button, the code in the editor will be validated with jQuery script and executed in the server-side and the result will be displayed below the editor. The action controls Run, Clear and Refresh buttons will make this application interactive.
Executing Code with Online Editor using jQuery AJAX
First, the editor instance is created by setting the initial properties by using the library function. With the reference of this editor instance, the editor code content will be read and executed. By clicking the Run button, the code typed in the editor window is read by using the getValue() function. The code can be passed to the PHP via an AJAX request and written in a server file.
After writing the editor code in a PHP file code-editable.php, the another AJAX request will be sent in the complete() callback. In the second AJAX request, the code-editable.php file is accessed. As this file is with the code typed on the editor, it will return the expected output as the AJAX response in a HTML format. This output will be shown in the result container element.
On clicking the Clear button, the editor window will be wiped out by removing the code via jQuery. The Refresh button click event will trigger the reload action to load the editor with the initial Hello Word PHP program.
PHP Script to Write Editor Code to a File Dynamically
In this PHP script, the editor code input from an AJAX request is received. Then the code content will be written to a target file. The PHP file functions are used to create the target file pointer to write the code into it. After writing the code to the file, the file pointer will be closed. When you set up this example in your local environment, make sure the code-editable.php target has the write permission.
<?php $fp = fopen("code-editable.php", "w") or die("Unable to open file!"); $editorCode = $_POST['input']; fwrite($fp, $editorCode); fclose($fp); ?>
Personal Online PHP Editor Output
This is the online editor interface with the button controls to run the code in the editor and to clear and refresh editor window. In this below screenshot, the editor contains the PHP code to get the datatype of the variables initialized.
This PHP code tutorial was published on August 20, 2018.
thanks you RSS link