El usuario selecciona una plantilla de la Rejilla y la Ficha correspondiente se carga en el formulario con el editor de código.

El código HTML de la plantilla, guardado en un campo objeto Texto, se carga desde la variable local CHTML en el editor AceEditor incrustado en el Visor HTML.

Comentar los siguiente:

oLa librería del editor AceEditor es ace.js que se guardará en la caché de vClient.

oUsamos un elemento temporal <textarea id="tmp_editor"> para pasar correctamente el código al Editor AceEditor.

oEjecutamos un replace(/<\/textarea>/g, "&lt;/textarea>") del contenido del código a editar para poder insertarlo correctamente.

oExiste un botón Guardar que no usamos, en su lugar, guardamos los cambios desde el formulario Velneo.

oEl evento editor.on("change", function codigo_cambiado() {leer_codigo()}) guarda el código editado en <div id="codigo"> para que podamos leerlo desde Velneo.

oExisten 2 botones para aumentar/disminuir el tamaño de la fuente del código editado.


El Visor HTML del editor de código se rellena con el siguiente código. He usado una fórmula javascript por comodidad pero se puede usar una fórmula de Velneo.

CÓDIGO PARA USAR EL EDITOR HTML


// Si existe </textarea> codificamos en HTML el caracter < para que no interfiera con el tag <textarea></textarea>

var cTexto = theRegister.varToString("CHTML").replace(/<\/textarea>/g, "&lt;/textarea>");

'<!doctype html> \n\

<html> \n\

   <head> \n\

      <title>Ace.js Editor</title> \n\

      <style type="text/css"> \n\

         body { \n\

            background-color: Gainsboro; \n\

         } \n\

         #tmp_editor { \n\

            display: none;\n\

         } \n\

         #editor { \n\

            font-size: 12px; \n\

            top: 40px; \n\

            right: 0; \n\

            bottom: 0; \n\

            left: 0; \n\

            position: absolute; \n\

            border: 5px solid white; \n\

            margin: 10px; \n\

         } \n\

         #btn_guardar { \n\

            font-family: verdana; \n\

            font-weight: bold; \n\

            color: #D4FF00; \n\

            font-size: 14px; \n\

            text-shadow: 1px 1px 0px #030D00; \n\

            box-shadow: 1px 1px 1px #BEE2F9; \n\

            padding: 10px 25px; \n\

            border-radius: 5px; \n\

            border: 1px solid #2C8C29; \n\

            background: -webkit-gradient(linear, left top, left bottom, from(#32EE02), to(#36780B)); \n\

         } \n\

         #btn_guardar:hover { \n\

            color: #FFFFFF; \n\

            background: -webkit-gradient(linear, left top, left bottom, from(#2B8A0E), to(#41EE15)); \n\

         } \n\

         .btn_zoom { \n\

            font-family: verdana; \n\

         } \n\

         .mas { \n\

            font-size: 14px; \n\

         } \n\

         .menos { \n\

            font-size: 10px; \n\

         } \n\

         #btn_zoom { \n\

            float: right; \n\

         } \n\

      </style> \n\

   </head> \n\

   <body> \n\

      <script src="ace.js"></script> \n\

      <!-- <button id="btn_guardar" type="button" onclick="guardar()">Guardar y mostrar</button> --> \n\

      <div id="btn_zoom"> \n\

         <button class="btn_zoom menos" type="button" onclick="zoom_menos()">A</button> \n\

         <button class="btn_zoom mas" type="button" onclick="zoom_mas()">A</button> \n\

      </div> \n\

      <!-- Usamos el objeto <textarea id="tmp_editor"> para codificar correctamente el texto a editar --> \n\

      <div id="editor"></div> \n\

      <!-- VELNEO_INI --><textarea id="tmp_editor">' + cTexto + '</textarea><!-- VELNEO_FIN --> \n\

      <script> \n\

         var editor = ace.edit("editor"); \n\

         var textoArea = document.getElementById("tmp_editor") \n\

         // Tema Eclipse y sintaxis HTML \n\

         editor.setTheme("ace/theme/eclipse"); \n\

         editor.getSession().setMode("ace/mode/html"); \n\

         editor.getSession().setTabSize(3); \n\

         editor.setShowPrintMargin(false); \n\

         editor.setBehavioursEnabled(true); \n\

         editor.setWrapBehavioursEnabled(true); \n\

         // Se copia el código al div id="codigo" cada vez que cambia \n\

         editor.on("change", function codigo_cambiado() {leer_codigo()}) \n\

         // Obtenemos el texto codificado correctamente (retornos y caracteres especiales) \n\

         // Obtenemos el valor del textarea y lo asignamos al editor

         var texto = textoArea.value; \n\

         editor.setValue(texto, -1); \n\

         var zoom_val = 12 \n\

         \n\

         function guardar() { \n\

            // Obtenemos el código del Editor y enviamos un Link a Velneo \n\

            leer_codigo() \n\

            enviar_link() \n\

         } \n\

         function leer_codigo() { \n\

            // Coloca el código editado en el <textarea> \n\

            textoArea.innerHTML = editor.getValue() \n\

            // alert(textoArea.innerHTML) \n\

         } \n\

         function enviar_link() { \n\

            // Envía un evento Click a Velneo \n\

            var a = document.createElement("a"); \n\

            a.href = "file:///#"; \n\

            a.click() \n\

            document.body.removeChild(a) \n\

         } \n\

         function zoom_mas() { \n\

            zoom_val > 19 ? zoom_val : zoom_val++ \n\

            document.getElementById("editor").style.fontSize = zoom_val + "px"; \n\

         } \n\

         function zoom_menos() { \n\

            zoom_val < 11 ? zoom_val : zoom_val-- \n\

            document.getElementById("editor").style.fontSize = zoom_val + "px"; \n\

         } \n\

      </script> \n\

   </body>

   \n\

</html>

\n\

'




Created with the Personal Edition of HelpNDoc: Easily create HTML Help documents