Marzo 4

2018
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  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.

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)

Como se puede decir que esto es una actualizacion de mi primera version, la forma de uso es practicamente la misma.

Descripcion de propiedades

  • Text: El texto que se va a mostrar
  • cssClass: El formato para el cuadro de texto
  • width: ancho
  • height: alto
  • rows: num. de filas
  • Toolbar: muestra o no la barra de botones personalizados. Boton guardar.

Descripcion de metodos

  • Cargar: Tipo Void. Utilizado para cargar el contenido
  • Recoger: Tipo String. Recupera el contenido
  • EditoSave: Desde JAVASCRIPT si se desea solo guardar el contenido sin post back.

Descripcion de eventos

  • Guardado: Se dispara al pulsar sobre el boton de "save"

Requisitos

  • Pagina contenedora: ValidateRequest="false"
  • WebConfig: <add tagPrefix="uc" src="~/Controles/editor.ascx" tagName="EditorTexto"/>

Mi toque personal en el JAVASCRIPT

Una cosa que no queda clara en el documentacion que esta en la web del script, es como obtener el codigo HTML de lo que estamos escribiendo. Analizando el fichero JS consegui encontrar la funcion que hace esto. 

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

Ademas encontre en falta que las imagenes no se podian redimensionar, y agrege esta posibilidad en el la ventana que se abre tras el menu contextual al hacer click con el boton derecho sobre la imagen. Y me he fijado que para insertar el formato, como en las lineas superiores, para identificar las lineas de codigo, tampoco lo tiene, pero aunque en los ficheros que te puedes descargar ahora mismo, voy a ver como se lo agrego, que en un pricipio no lo veo dificil.

Reconocimientos

El encabezado de este documento ha sido obtenido de Wikipedia .
El script como ya se ha mendionado es de Suyati Technologies.

Conclusiones

Espero que os sirva para mucho este articulo, y que os guste la solucion.Podeis personalizarlo todo lo que querais, todo el codigo esta con licencia de uso gratuito. El escript aqui presentado tambien lo he aplicado con PHP de una forma muy sencilla. Con la informacion que teneis en la pagina del autor podreis utilizarlo sin problemas.

#UserControl #ASP #javascript

0 Comentarios

Escribir un comentario

0 + 8 =

Editor WYSIWYG para ASP


Archivo