CODINT

Sobre Codint

Codint proporciona una interfaz de administración de archivos dentro de un directorio específico y puede usarse para cargar, eliminar, obtener una vista previa, cambiar el nombre y editar sus archivos. Se puede utilizar como una aplicación independiente.

Caracteristicas

• Administrador de archivos
• Editor de codigo
• Consola para errores, mensajes y advertencias
• Configuraciónes iniciales
• Adaptado a modo celular
• Apartado para configurar Codint

Contenido

Una vez descargado, descomprima la carpeta comprimida para ver la estructura de Codint (compilado). Verás algo como esto:

codint/
├── css/
│   └── codint.css
├── js/
│   ├── ace.js
|   ├── codint.js
│   └── lang.json
└── php/
    ├── code.php
    ├── files.php
    └── save.php

Versiones

Estas son las versiones con sus respectivas caracteristicas:

vs/
├── vs-3/
|   ├── Botom para expandir y reducir
|   ├── Botom para cambiar de idioma
|   ├── Se mejoro le diseño 
│   └── Consola captura errores/mensajes/advertencias
├── vs-2/
│   ├── Modo oscuro/claro
|   ├── Modo responsive
|   ├── añadimos Ace editor
│   └── mejora en el apartado consola
└── vs-1/
    ├── creación de contenedores
    ├── listar archivos
    └── consola basica
            

Instalación

Nosotros amablemente proporcionamos soporte CDN para CSS y JavaScript. Simplemente use estos enlaces.

 < link rel="stylesheet" href="https://codint.ronald-ramos.com/codint/css/codint.css"> 

Nos ubicamos al final de nuestra estructura y colocamos este div

< div class="codint" id="codint">< /div> 

Copie estos Scripts despues del anterior codigo (div)

< script src="https://codint.ronald-ramos.com/codint/js/ace.js" type="text/javascript" charset="utf-8">< /script> 
< script src="https://codint.ronald-ramos.com/codint/js/codint.js" type="text/javascript">< /script> 

Configuración

Para iniciar con Codint debera primero configurar valores iniciales:

• lang : "en" | "es"
• theme : "dark" | "light"
• font : "system-ui" | "Asigna fuente libre"
• fontSize : "50%" | "Asigna valor libre"
• size : "350px" | "Asigna valor libre"
• content : "false" | "true"
• iniFile : "index.php" | "archivo inicial"
• getFiles : "codint/php/files.php" | "si cambia la ubicación de codint"

//configuración de codint
var settings = {
    lang: 'en',
    theme: "dark",
    font: "system-ui",
    fontSize: '50%',
    size: '350px',
    content: false,
    iniFile: 'index.php',
    getFiles: 'codint/php/files.php',
};

codint.init('codint', settings);

    // Configuración inicial del editor de codio Ace  
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.session.setMode("ace/mode/html");

Luego configuramos el editor Ace que nos permitira observar de mejor forma el codigo a editar.

 
// Configuración inicial del editor de codio Ace  
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/html");