Cómo configurar el modo de editor ACE según la extensión de archivo

Ace es un editor de código integrable escrito en JavaScript. Coincide con las funciones y el rendimiento de editores nativos como Sublime, Vim y TextMate. Puede integrarse fácilmente en cualquier página web y aplicación JavaScript. Sin lugar a dudas, ACE es el editor de código favorito escrito en Javascript de muchos desarrolladores que desean brindar la habilidad de editar archivos de código sobre la marcha en sus aplicaciones. Una cosa muy habitual que deberá hacer, cuando alguien seleccione un archivo para cargarlo en ACE, es que debe habilitar el modo correcto para proporcionar una mejor experiencia de usuario (comprobación de errores, resaltado, etc.).

Sin embargo, esta tarea no se realizará solo, ya que ACE no analizará el código para verificar el lenguaje de programación del texto proporcionado. En este artículo, aprenderá a configurar el modo automáticamente

Implementación

La siguiente implementación funcionaría bien, en caso de que no desee utilizar el módulo incorporado que facilita las cosas, para lograr esta tarea:

function autoImplementedMode(filename){
    var ext = filename.split('.').pop();
    var prefix = "ace/mode/";

    if(!ext){
        return prefix + "text";
    }

    /**
     *  Funcional, pero ineficaz si quieres escribirlo tú mismo ...
     */
    switch (ext) {
        case "js":
        return prefix + "javascript";
        case "cs":
        return prefix + "csharp";
        case "php":
        return prefix + "php";
        case "rb":
        return prefix + "ruby";
    }
}


var filename = "myfile.js";
// En este caso "ace/mode/javascript"
var mode = autoImplementedMode(filename);
editor.getSession().setMode(mode);

Sin embargo, deberá crear una lista enorme para cubrir todas las extensiones y lenguajes de programación posibles (en caso de que realmente desee implementar esto usted mismo, puede verificar el código fuente del archivo ext-modelist en Github para recuperar una lista completa de extensiones ). Entonces, ¿cuál es la forma correcta (y fácil) de hacerlo? Simplemente use la extensión modelista del editor ACE que ya ha escrito todas las posibles extensiones de archivo y modo para ACE y estará listo para comenzar.

El modelist.js archivo normalmente se encuentra en src/ext-modelist.js, por lo que deberá agregarlo con una etiqueta de secuencia de comandos en su documento:

<script src="./ace/src/ext-modelist.js"></script>

Y luego podrá solicitarlo usando require("ace/ext/modelist") ace.require("ace/ext/modelist") según la versión de ACE que esté usando:

/**
 * Devuelve el modo correcto para ace editor de acuerdo con la extensión de archivo de un nombre de archivo.
 * 
 * @param path {String} filename or extension (.js, .txt)
 */
function getModeByFileExtension(path){
    var modelist = ace.require("ace/ext/modelist");
    return modelist.getModeForPath(path).mode;
}


var filename = "myfile.js";
// En este caso "ace/mode/javascript"
var mode = getModeByFileExtension(filename);
editor.getSession().setMode(mode);

Si el fragmento anterior no es suficiente para usted, vea el código fuente de una demostración usando la extensión modelist aquí en Github .

Que te diviertas ❤️!

Esto podria interesarte

Conviertete en un programador más sociable