Tecnologías Microsoft

Web Development

July 2010 - Artículos

Editor WYSIWYG para ASP.NET

Que tal muchos de nosotros nos dedicamos al desarrollo web y a veces los clientes nos piden que actualizemos los contenidos del sitio web, para esto es sumamente recomendable que utilizemos algún editor WYSIWYG (What You See Is What You Get).

En ASP.NET podemos integrar el editor FCKeditor el cual desde su página podemos descargar el control de servidor y registrarlo dentro de nuestra página ASP.NET.

URL: http://ckeditor.com/download

1.- Descomprimir el archivo de .NET, navegamos dentro de la carpeta Bin 2.0 encontraremos la .dll llamada FredCK.FCKeditorV2.dll , en donde la agregaremos como referencia dentro de nuestro proyecto.

fckeditorASPNET_02

2.- Descargamos también los archivos completos del FCKeditor y los descomprimimos dentro de nuestra carpeta del sitio web. (Es recomendable que nuestro sitio web esté hospedado dentro de un servidor IIS).

3.- Ahora nos toca registrar el control de servidor para que podamos utilizarlo dentro de nuestas página web con la directiva @Register colocando el Assembly, NameSpace y nuestro TagPrefix personalizado, de la siguiente forma:

<%@ Page Language="C#" AutoEventWireup="true"  
CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="FredCK.FCKeditorV2" 
Namespace="FredCK.FCKeditorV2" TagPrefix="Editor" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">   
    <Editor:FCKeditor ID="Editor" runat="server"></Editor:FCKeditor>
    </form>
</body>
</html>

fckeditorASPNET_01

En esta ocasión mostraremos como manipular archivos .txt para leer y escribir desde el FCKeditor.

4.- Agregamos una clase llamada Archivo.cs: Necesitamos agregar el espacio de nombres System.IO

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.IO;

namespace iEduSoft
{
   public class Archivo
    {
       public static string LeerTXT(string rutaArchivo)
       {
           string contenido="";
           using(StreamReader lector = File.OpenText(rutaArchivo))
           {
               contenido = lector.ReadToEnd();
               contenido = contenido.Replace(Environment.NewLine, "<br>");
           }
           return contenido;
       }

       public static void EscribirTXT(string rutaArchivo,string contenido)
       {
           using (StreamWriter escritor = File.CreateText(rutaArchivo))
           {
               escritor.Write(contenido);
           }
       }
    }
}

En esta clase tenemos dos métodos uno para leer archivos .txt y el otro para sobreescribir o escribir texto en ellos.

5.- Agregamos un botón de Actualizar.

fckeditorASPNET_03

6.- Dentro del evento Page Load podemos agregar nuestro método de lectura de archivo y dentro del evento click del botón el de escritura.

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            Editor.Value = Archivo.LeerTXT(Server.MapPath("Documentos/Post1.txt"));
        }
    }
    protected void btnActualizar_Click(object sender, EventArgs e)
    {
       Archivo.EscribirTXT(Server.MapPath("Documentos/Post1.txt"), Editor.Value);
    }
  
}

7.- Corremos la aplicación, y listo tenemos un editor online para nuestros sitios web ASP.NET.

Si lo vinculamos a alguna base de datos es mucho más fácil.

fckeditorASPNET_04

Saludos.

Edison Daniel García Chiñas

Posted: 28/7/2010 2:35 por Edison Daniel García | con no comments
Archivado en: ,