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.

Đang xem: Free online php compiler

This article is to create an online code editor for executing PHP scripts. I have used the CodeMirror API for the UI to type and edit the code online. CodeMirror is a JavaScript-based library. It is one of the popular and widely used code editor. I have written a custom logic to get the code and run (interpret) it in the server-side and provide results in the browser.

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.

Xem thêm: Góc Tâm Sự Với Người Yêu Cũ (Vương Anh Tú), Tâm Sự Với Người Yêu Cũ

*

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.

The code typed in the editor window can be seen in a various mode based on the programming language. For each mode, the library includes separate JavaScript to classify the mode. In this example, the JavaScript files are used for differentiating the mode of languages like PHP, CSS, XML and more.

Xem thêm:

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.

Related Post

Leave a Reply

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