Integración de editores WySiwyG en ASP.Net MVC – TinyMCE
Este tipo de editores son simples editores HTML de texto enriquecido, también llamados editores Wysiwyg (What You See Is What You Get).
La integración de estos editores en los “textarea” de nuestra aplicación Web da al usuario facilidad para enriquecer el texto a enviar, ya sea con imágenes, sangrías, colores de texto, y otras muchas opciones que nos ofrecen.
Existen gran variedad de editores Open Source como TinyMCE, openWysiwig o CKEditor, muy potentes y de fácil integración en nuestro código.
TinyMCE
Es uno de los editores de código abierto más populares, por su fácil integración y su amplia configuración del menú de formato limitando botones.
openWysiwig
Su configuración es sencilla, se tiene un control total de la configuración del editor, y con solo unas líneas de código lo tendrán en su página Web.
CKEditor
Este es uno de los editores más potentes e incluye una interfaz de usuario más atractiva que el resto, ya que se asimila mucho a cualquier aplicación de escritorio.
Es una gran solución para los desarrolladores al poder proporcionar soluciones diferentes por la variedad de opciones que incluye.
¿Cómo podemos utilizar TinyMCE?
Esta tan fácil como descargar el paquete de TinyMCE a través del NuGet de Visual Studio, siguiendo los siguientes pasos:
- Hacer derecho en el Proyecto .
- Seleccionar Manager NuGet Packages en el menú contextual .
- Seleccionar la pestaña Online de la izquierda en el cuadro de diálogo .
- Buscar » TinyMCE » en la esquina superior derecha.
- Instalar el paquete TinyMCE.MVC al proyecto.
Si no tenemos acceso al NuGet podemos descargar el paquete de la página oficial:
Aquí, aparte del paquete, tenemos documentación, ejemplos y demos muy útiles para integrar TinyMCE en nuestro proyecto con sencillez.
Importante
Para la integración de cualquier Rich Text Editor es importante tener en cuenta que, por defecto, ASP.NET, no permite el envió de código HTML para evitar ataques de tipo XSS (Cross Site Scripting) en la aplicación.
Para deshabilitar esta validación de peticiones y que nuestro editor funcione correctamente tenemos dos atributos que podemos utilizar:
- A nivel de Controller o Método : [ValidateInput(false)]
Todas las propiedades que lo utilicen incluirán este atributo.
- A nivel de clase: [AllowHtml] :
Es la mejor opción y más segura, ya que solo afecta a las propiedades que decidamos incluirselo.
¿Cuál es tu Editor WYSIWYG favorito?