Archivo del sitio
Control editor de texto open-source: TinyMCE + NetImageBrowser
En ocasiones un cliente puede desear encargarse él mismo del mantenimiento de la página web que se le ha diseñado sin tener que retocar directamente el código fuente.
Para ello se suelen programar aplicaciones web desde las cuales se puede actualizar una página web, utilizando un recurso bastante común, el uso de controles llamados WYSIWYG (What You See Is What You Get).
Un control WYSIWYG es un editor de texto que permite modificar el contenido de una página web asociada, colocando los elementos tal y como queremos que se visualicen (como si escribiéramos un documento de MSWord).
Existen varios controles editores de texto conocidos, algunos de ellos gratuitos, los cuales dejan bastante que desear en algunos aspectos. Es el caso del control FreeTextBox para ASP.NET, que entre otros problemas, escribía gran cantidad de código basura cuando se hacía copy/paste desde un documento de Word, ya que, al hacer la conversión interna de los estilos de Word a HTML en el editor, incluía muchas etiquetas innecesarias. Esto puede parecer una tontería, que se solucionaría convirtiendo el contenido a texto plano e introduciendo nuestros propios estilos manualmente, pero implica una pérdida de tiempo que el cliente prefiere no asumir.
Estuve buscando otros editores gratuitos que solucionaran este problema y que añadieran otras funcionalidades, pero ninguno satisfacía por sí solo todas las necesidades. El que más me convenció fue TinyMCE, un control basado en html y javascript, lo que permite su integración de forma muy sencilla en cualquier plataforma, incluido ASP.NET.
Podemos probar cómo funciona desde la página oficial. Aquí.
Como he dicho antes, la integración es muy sencilla. Vamos a ver cómo.
– En primer lugar abrimos nuestro Visual Studio (en este ejemplo uso 2008), hacemos clic en File>Website y elegimos ASP.NET Website si queremos empezar un nuevo sitio web.
– Nos descargamos la última versión disponible del tinyMCE desde aquí.
– Descomprimimos el fichero y copiamos la carpeta TinyMCE en nuestra solución de Visual Studio, como se muestra abajo.
– Ahora arrastramos un control de cuadro de texto ASP.Net en nuestra página aspx y establecemos la propiedad TextMode a Multiline.
– Para utilizar las características de TinyMCE con el cuadro de texto Multiline, necesitamos incluir el fichero Tiny_MCE.js, que se encuentra en la carpeta tinymce/jscripts/tiny_mce/ del paquete, en nuestra página web.
<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
– A continuación tenemos que llamar al API javascript de tinyMCE para convertir el cuadro de texto Multiline a una instancia del editor, tal y como se muestra abajo.
<head runat="server">
<script type="text/javascript"
src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" language="javascript">
tinyMCE.init({
mode: "textareas"
});
</script>
<title></title>
</head>
– ¡Y ya está! Ejecutamos la página y podemos ver nuestro control. Por defecto, el editor TinyMCE incluirá una barra de herramientas de configuración simple con algunas herramientas básicas. Así:
– El código final nos quedaría así:
<head runat="server">
<script type="text/javascript"
src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" language="javascript">
tinyMCE.init({
mode: "textareas"
});
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" TextMode="MultiLine"
runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
Dentro del código javascript podemos incluir todas las herramientas que incluye la versión gratuita, en la columna que deseamos que se sitúe. Sustituyamos en el código anterior, la parte comprendida entre las líneas <script type=»text/javascript» src=»tinymce/jscripts/tiny_mce/tiny_mce.js»></script> y </script> (ambas incluidas) por el siguiente código:
<script type="text/javascript"
src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" language="javascript">
tinyMCE.init({
// General options
mode: "textareas",
theme: "advanced",
plugins: "safari,pagebreak,style,layer,table,save,advhr,
advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,
preview,media,searchreplace,print,contextmenu,
paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,
xhtmlxtras,template,wordcount",
// Theme options
theme_advanced_buttons1: "save,newdocument,|,bold,italic,
underline,strikethrough,|,justifyleft,justifycenter,justifyright,
justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,
|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,
undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,
inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,
visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,
|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4: "insertlayer,moveforward,movebackward,
absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,
nonbreaking,template,pagebreak",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,
// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js"
}
});
</script>
Al ejecutar de nuevo la página podemos ver el resultado:
Sin embargo, esta versión tiene un importante déficit respecto de la que hemos visto en el ejemplo de la página oficial, y es que no permite incluir imágenes descargadas desde el propio pc o servidor. Para eso hay que pagar.
Aunque también podemos programar nosotros mismos el plugin…o buscar en internet por si alguien ya lo ha hecho, como es el caso :D.
El plugin que encontré, en concreto, se llama netImageBrowser y podemos descargarlo desde aquí. El autor tiene como nombre de usuario, Ilyax.
Incluir este plugin en nuestro proyecto es tan sencillo como copiar la carpeta netImageBrowser que hemos descargado en el directorio tinyMCE/plugins/, y añadir la nueva herramienta en el código javascript. Por ejemplo en la tercera columna, quedando así:
theme_advanced_buttons3: "tablecontrols,|,hr,removeformat, visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print, |,ltr,rtl,|,fullscreen", theme_advanced_buttons4: "insertlayer,moveforward, movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del, ins,attribs,|,visualchars,nonbreaking,template,pagebreak ,netImageBrowser",
Con este nuevo control podemos subir imágenes desde nuestro pc a nuestro servidor, cuya dirección debemos especificar en el fichero up.aspx, modificando en las siguientes líneas:
private string path =
HttpContext.Current.Server.MapPath("../../../images");
private string imgPath = "../../../images";
los paths en negrita por los paths de nuestro servidor. Una vez hemos subido los ficheros ya pueden ser incluidos en nuestro editor de texto. En este enlace podemos ver un ejemplo de cómo funciona este control. Es el icono con forma de carpeta que aparece en la primera columna del editor.
Ya he incluido este control en alguna aplicación, en concreto la de la página del Observatorio de la Universidad Cardenal Herrera – CEU, cuya página principal (y casi todas las demás también) pueden ser modificadas por el usuario a través del control situado en la aplicación.
A continuación vemos una captura de pantalla del editor utilizado en la aplicación para actualizar la página principal:
Y el resultado final se ve enlazando con la página web. (El contenido puede ser distinto del de la foto de arriba si el usuario ha decidido modificarlo desde el editor para actualizar su web…¡Ese es el objetivo! ).
Eso es todo. Un saludo.
WebNet Architect 