Editor WYSIWYG para ASP

Que es un editor WYSIWYG

WYSIWYG es el acrónimo, porque a los hablantes del ingles les encantan hacer estas abreviaciones, de What You See Is What You Get, (en español, "lo que ves es lo que obtienes"). Se aplica a los procesadores de texto y otros editores de texto con formato (como los editores de HTML) que permiten escribir un documento viendo directamente el resultado final, frecuentemente el resultado impreso. Se utiliza en contraposición a otros procesadores de texto, hoy en día poco frecuentes, en los que se escribía sobre una vista que no mostraba el formato del texto, hasta la impresión del documento. En el caso de editores de HTML este concepto se aplica a los que permiten escribir la página sobre una vista preliminar similar a la de un procesador de textos, ocupándose en este caso el programa de generar el código fuente en HTML.

Ejemplos de editores HTML tipo WYSIWYG son: Dreamweaver, NVU/Kompozer, las versiones de Composer de Netscape y Mozilla, Amaya, Writer (de OpenOffice.org), Adobe Golive, Frontpage y Microsoft Word. También existen editores que se pueden integrar en formularios de páginas web como FCKeditor, TinyMCE, FreeRichTextEditor  y LineControl Editor, que es del que vamos a hablar hoy.

En el área de diseño web existen también herramientas WYSIWYG, dentro de los llamados CMS (Content Management System); aunque un CMS no tiene porqué ser WYSIWYG, es decir puede ser un gestor de contenidos cuyo panel de gestión no se corresponda con el diseño final, sino que en este caso se utiliza un back-end o panel de gestión para crear-modificar los contenidos, que serán reflejados en el front-end o parte final que ven los usuarios. En el grupo de los CMS WYSIWYG hay varias aplicaciones, incluso alguna de ellas con tecnología flash, como por ejemplo Easy Site Manager o, como no, COMMUNITY-MALL, el CMS con el que esta hecho este blog.

Estoy creando una nueva version, completamente hecha por mi y el que quiera colaborar en un open source. Puedes acceder al respositorio en  

Uso de JAVASCRIPT

Para ASP nos vemos "obligados" a utilizar JAVASCRIPT para poder crear nuestro editor WYSIWYG, o por lo menos hasta ahora no he encontrado otra forma, y gracias a Suyati Technologies obtenemos el mas simple de uso, hasta ahora, que he encontrado. Y con muy pocas lineas de código lo podemos integrar dentro de nuestra pagina ASP.

Hace ya casi 2 años, precisamente para inaugurar mi blog, ya presente una version de editor WYSIWYG para ASP (mi primera version WYSIWYG). En ese caso utilizamos el script NicEdit, pero, como vereis si entrais en mi otro blog, era un poco complicado de integrar con ASP, aunque yo consegui una version mas o menos estable. Pero esta version que os presento ahora, y con la que estoy escribiendo estas lineas, es mucho mas facil, y me ha gustado mucho mas como ha quedado.

Manos a la obra

Primero tenemos que agregar un control de usuario (user control), y una de las cosas mas importates a tener en cuenta es que hay que desabilitar el request de la pagina, si no lo hacemos se generara un error. En el principio de la pagina de codigo escribiremos ValidateRequesMode = "Disabled".

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="editor.ascx.cs" Inherits="UserControls_editor" ValidateRequestMode="Disabled" %>

Luego hacemos las llamadas a los archivos de css y javascript de la utilidad Easy Site Manager, que podemos descargar desde su pagina web, o en este mismo blog ya integrada. Ademas de unas pocas lineas para inicializarlo.

< link href="<%= ResolveUrl("~/css/editor.css"); %>" type="text/css" rel="stylesheet"/>
< script src="<%= ResolveUrl("~/s/editor.js"); %>">< /script>
< script>    //inicializar el script    $(document).ready(function () {        $("# mi_text_box").Editor();    //inicializar	Cargar();    });    function Cargar() {        $("# mi_text_box").Editor('setText', texto);       //cargar el texto dentro del control    }   < /script>
< asp:TextBox ID="mi_text_box" runat="server">< /asp:TextBox>       //control de texto donde vamos a cargar el control.

Como utilizar mi control de usuario (user control)

 var editor = $("# mi_text_box").Editor('getText');

Conclusiones