Los editores online cuentan con ventajas chulÃsimas, como por ejemplo lo fáciles de utilizar que son o simplemente, que puedes ver una preview del código que estás escribiendo en vivo. Escribir código online en el navegador web y ejecutarlo sobre la marcha es una experiencia, como dirÃa Enrique Iglesias, absolutamente religiosa. Por lo pronto no te tendrás que descargar e instalar nada en tu equipo, ni tampoco configurar el entorno local para implementar tus proyectos.
Es por eso que en este artÃculo te mostraremos cómo crear un editor PHP online en el que podrás ejecutar tus propios scripts PHP. Para ello utilizaremos la API CodeMirror para que nos ayude a crear la interfaz de usuario. CodeMirror es una librerÃa JS super popular y ampliamente utilizada para este tipo de menesteres.
¿Todo claro? Pues vamos allá...
Ojo, este tutorial está diseñado de tal manera que puedas implementarlo en tu entorno local para tu uso personal. Si quieres subirlo en algún entorno en producción habrÃa que mejorarlo muy mucho.
En este ejemplo, mostraremos nuestro editor en una landing page. Por defecto vendrá cargado con el tipo código de "Hello world". El código de la ventana del editor será editable y la acción Run ejecutará el código que se muestre en dicha ventana. Además podremos borrar y volver a cargar la ventana del editor haciendo clic en los botones de Clear y Refresh respectivamente. Todas estas acciones se ejecutarán mediante jQuery AJAX.
Convirtiendo un textarea de html en un editor de código
Antes que nada, tenemos que descargar CodeMirror e integrarlo incluyendo los archivos necesarios para mostrar el editor en nuestro proyecto. Al integrar la librerÃa, los textarea de nuestro formulario podrán convertirse en un editor de código con todas las de la ley.
El código que escribamos en la ventana del editor se verá de distinto modo según el lenguaje de programación en el que escribamos. Para cada modo, la librerÃa incluirá un javascript concreto que nos ayudará a discernir la sintaxis.
Por defecto la ventana del editor contendrá código de ejemplo. Al hacer clic en el botón Run, validaremos el código mediante jQuery y lo ejecutaremos en el lado del servidor. El resultado de implementar el código lo mostraremos debajo del editor.
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<link rel="stylesheet" type="text/css" href="lib/codemirror/lib/codemirror.css">
<link rel="stylesheet" type="text/css" href="lib/codemirror/theme/ambiance.css">
<script src="lib/jQuery/jQuery.js"></script>
<script src="lib/codemirror/lib/codemirror.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="editor-action.js"></script>
<script src="lib/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script src="lib/codemirror/mode/xml/xml.js"></script>
<script src="lib/codemirror/mode/javascript/javascript.js"></script>
<script src="lib/codemirror/mode/css/css.js"></script>
<script src="lib/codemirror/mode/clike/clike.js"></script>
<script src='lib/codemirror/mode/php/php.js'></script>
<script src='lib/codemirror/addon/selection/active-line.js'></script>
<script src='lib/codemirror/addon/edit/matchbrackets.js'></script>
</head>
<body>
<div class="row">
<textarea class="codemirror-textarea" id="ed_code"></textarea>
<div class="app-row">
<button class="btn-action" id="run">Run</button>
<button class="btn-action" id="clear">Clear</button>
<button class="btn-action" id="refresh">Refresh</button>
</div>
</div>
<div class="app-row">
<div id="result"></div>
</div>
</body>
</html>
Este es el código Javascript que utilizaremos para inicializar las propiedades de CodeMirror con las que convertiremos un textarea en un editor de código. En este script, utilizaremos la clase del textarea para referenciarlo a la hora de inicializar la librerÃa.
<script type="text/javascript">
$(document).ready(function() {
var codeEditorElement = $(".codemirror-textarea")[0];
var editor = CodeMirror.fromTextArea(codeEditorElement, {
mode : "application/x-httpd-php",
lineNumbers : true,
matchBrackets : true,
theme : "ambiance",
lineWiseCopyCut : true,
undoDepth : 200
});
});
</script>
Ejecutando código con un editor de código online mediante jQuery Ajax
Primero, crearemos la instancia del editor configurando las propiedades básicas. Con la referencia de esta instancia de editor, el contenido del código del editor se leerá y ejecutará. Al hacer clic en el botón Run, leeremos el código escrito en la ventana del editor utilizando la función getValue(). Pasaremos el código al PHP a través de una solicitud AJAX y escrito en un fichero del servidor. Después de escribir el código del editor en un fichero PHP al que llamaremos code-editable.php, enviaremos otra solicitud AJAX en la devolución de llamada complete(). En la segunda solicitud de AJAX, accederemos al archivo code-editable.php. Como este archivo tiene el código que hemos escrito en el editor, devolverá el resultado esperado como una respuesta AJAX en formato HTML. Esta salida se mostrará en el elemento que utilizaremos como contenedor de resultados.
Al hacer clic en el botón Clear, se eliminará el código en la ventana del editor a través de jQuery. El evento clic del botón Refresh activará la acción de recarga para cargar el editor con el programa inicial Hello Word de PHP.
<script type="text/javascript">
$(document).ready(function(){
var codeEditorElement = $(".codemirror-textarea")[0];
var editor = CodeMirror.fromTextArea(codeEditorElement, {
mode: "application/x-httpd-php",
lineNumbers: true,
matchBrackets: true,
theme: "ambiance",
lineWiseCopyCut: true,
undoDepth: 200
});
editor.setValue('<?phpnecho "Hello World!"n?>');
$(document).on('click', '#run', function(e){
e.preventDefault();
$("#error").html("").hide();
var editorCode = editor.getValue();
if(editorCode != ''){
$.ajax({
url: 'file-write.php',
type: 'POST',
dataType: 'json',
data: {"input":editorCode},
success:function(response){
},
complete:function(){
$.ajax({
url: 'code-editable.php',
type: 'GET',
success:function(response){
console.log("response: "+response);
$("#result").html(response) ;
},
error:function(){
console.log("error: "+response);
}
});
}
});
} else{
$("#error").html("Code should not be empty").show();
}
});
$(document).on('click', '#clear', function(e){
e.preventDefault();
$("#error").html("").hide();
editor.setValue('');
});
$(document).on('click', '#refresh', function(e){
e.preventDefault();
$("#error").html("").hide();
location.reload();
});
});
</script>
Script que guarda lo escrito en el editor en un fichero
En este script PHP, recibiremos el código del editor en una solicitud AJAX. Luego, el contenido del código se escribirá en un archivo de destino. Las funciones del archivo PHP se utilizan para crear el puntero del archivo de destino para escribir el código en él. Después de escribir el código en el archivo, el puntero del archivo se cerrará. Cuando configures este ejemplo en tu entorno local, asegúrate de que el fichero code-editable.php tenga permisos de escritura.
<?php
$fp = fopen("code-editable.php", "w") or die("Unable to open file!");
$editorCode = $_POST['input'];
fwrite($fp, $editorCode);
fclose($fp);
?>