Como instalar CKEditor con el plugin code snippet

23/08/20210 comentarios

Hola a todos, hoy os explicaré como podemos instalar CKEditor con el plugin code snippet.

CKEditor es un editor HTML WYSING (What You See Is What You Get) que nos permite añadir HTML de forma gráfica.

En este manual, vamos a ver como instalar el plugin code snippet, este plugin nos sirve para poder mostrar código como si un IDE fuera.

Puedes descargar CKEditor aquí.

Puedes descargar el plugin code snippet aquí.

Lo descargamos y descomprimimos en nuestro proyecto, yo recomiendo ponerlo en una carpeta llamada includes, algo así:

El plugin lo metemos dentro de la carpeta plugins.

Ahora debemos importar algunos elementos en el index.html.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo CKEditor y code snippet</title>

    <link rel="stylesheet" href="./includes/ckeditor/plugins/codesnippet/lib/highlight/styles/monokai_sublime.css">
    <script src="./includes/ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script>
    <script src="./includes/ckeditor/ckeditor.js"></script>
    <script src="main.js"></script>
</head>
<body>
    
</body>
</html>

Es importante importar highlight, es realmente es que hace el hace el trabajo de formatear y colorear el código.

Ahora vamos a añadir un textarea, un botón y un div vacío. Cuando pulsemos el botón copiaremos el contenido del textarea al div vacío, esto no es obligatorio, pero por si lo queréis usar fuera del textarea.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo CKEditor y code snippet</title>

    <link rel="stylesheet" href="./includes/ckeditor/plugins/codesnippet/lib/highlight/styles/monokai_sublime.css">
    <script src="./includes/ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script>
    <script src="./includes/ckeditor/ckeditor.js"></script>
    <script src="main.js"></script>
</head>
<body>

    <textarea name="editor" id="editor" cols="30" rows="10"></textarea>
    
    <button onclick="cargarDatos()">Cargar</button>

    <div id="code-content"></div>

</body>
</html>

Nos creamos un fichero main.js y metemos el editor de esta forma:

function init(){

    if(document.querySelector("#editor")){
        var config = {
            extraPlugins: 'codesnippet',
            codeSnippet_theme: 'monokai_sublime',
            height: 356
        }
        CKEDITOR.replace('editor', config)

    }

}

window.onload = init;

También vamos a hacer la función de cargar el contenido del textarea al div vacío:

function init(){

    if(document.querySelector("#editor")){
        var config = {
            extraPlugins: 'codesnippet',
            codeSnippet_theme: 'monokai_sublime',
            height: 356
        }
        CKEDITOR.replace('editor', config)

    }

}

function cargarDatos(){
    var data = CKEDITOR.instances.editor.getData();
    const codeContent = document.getElementById("code-content");
    codeContent.innerHTML = data;
    hljs.highlightBlock(codeContent);
}

window.onload = init;

Vamos a probar, abrimos el fichero index.html y veremos algo asi: