Cómo integrar un editor WYSIWYG HTML en ASP.NET MVC

Como ya seguramente sabemos, un editor WYSIWYG (lo que ves es lo que obtienes) nos permite crear código HTML de manera visual, tal y como quedaría posteriormente en un navegador.

TinyMCE, es un editor WYSIWYG ligero y eficiente que podemos instalar vía NuGet en nuestros proyectos ASP.NET MVC, para hacer uso de el en cualquier momento con una simple configuración en JavaScript.

En este artículo, veremos cómo integrar el editor WYSIWYG TinyMCE en un proyecto ASP.NET MVC de una manera rápida y sencilla.

Instalando el paquete NuGet - TinyMCE

Una vez hayamos creado nuestro proyecto ASP.NET MVC, accederemos a la consola de administración de paquetes NuGet (Herramientas > Administrador de paquetes NuGet > Consola del Administrador de paquetes) y ejecutaremos el siguiente comando:

PM> Install-Package TinyMCE 

Una vez instalado el paquete, observaremos que se ha creado una nueva carpeta tinymcedentro de la carpeta Scripts, con los archivos JavasScript (y otros) necesarios para la configuración del editor.

tinymce-scripts

 

Configurando el editor - JavaScript

Seguidamente, iremos a la Vista donde queremos integrar el editor, e insertaremos los scripts (javaScript) necesarios para su correcto funcionamiento.

Todo esto lo haremos dentro de la directiva @section scripts { ... } de la Vista:

@section scripts {

    @*--- CONFIGURACIÓN DEL EDITOR HTML TINY-MCE ---*@
    <script type="text/javascript" src="/Scripts/tinymce/jquery.tinymce.min.js"></script>
    <script type="text/javascript" src="/Scripts/tinymce/tinymce.min.js"></script>

    <script type="text/javascript" src="/Scripts/tinymce/plugins/image/plugin.min.js"></script>
    <script type="text/javascript" src="/Scripts/tinymce/plugins/link/plugin.min.js"></script>
    <script type="text/javascript" src="/Scripts/tinymce/plugins/code/plugin.min.js"></script>
    <script type="text/javascript" src="/Scripts/tinymce/plugins/colorpicker/plugin.min.js"></script>
    <script type="text/javascript" src="/Scripts/tinymce/plugins/textcolor/plugin.min.js"></script>
    <script type="text/javascript" src="/Scripts/tinymce/plugins/emoticons/plugin.min.js"></script>
    <script type="text/javascript" src="/Scripts/tinymce/plugins/imagetools/plugin.min.js"></script>
    <script type="text/javascript" src="/Scripts/tinymce/plugins/codesample/plugin.min.js"></script>

    <script type="text/javascript" src="/Scripts/tinymce/themes/silver/theme.min.js"></script>

    <script>
        tinymce.init({
            selector: ".tinymce",
            language: 'es',
            mode: "none",
            theme: "silver",
            plugins: "codesample image imagetools emoticons table link code colorpicker textcolor preview searchreplace paste fullscreen noneditable nonbreaking wordcount",
            browser_spellcheck: true,
            relative_urls: false,
            toolbar: "codesample blockquote formatselect fontselect fontsizeselect bold italic underline forecolor backcolor advlist image imagetools link code colorpicker textcolor preview fullscreen noneditable nonbreaking wordcount emoticons",
            content_css: '/Content/tinymce.css'
        });
    </script>

}

Como podemos ver en el código, la configuración consiste en una primera parte donde referenciamos los archivos .js principales y los plugins, y una segunda parte donde configuramos las características intrínsecas del editor.

Lo más importante a destacar de la configuración, son las siguientes propiedades:

selector: Indica la forma en la que se identificará el elemento (tag Html) al que se le aplicará el editor. En este caso, serán todos los elementos Html cuya clase css de estilo (class) sea .tinymce.

plugins: Debemos indicar los plugins que queremos utilizar en el editor.

toolbar: Debemos indicar que elemetos queremos que se muestren en la barra de herramientas.

content_css: El archivo de hoja de estilo css, que opcionalmente queremos aplicar al editor. Por ejemplo si queremos aplicar ciertos estilos especiales a etiquetas que solo son propias del editor como <blockquote /> o <code /> lo haríamos en el archivo tinymce.css de la siguiente manera:

blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 1em !important;
    border-left: 5px solid #ffeb8e !important;
    background: #FFF8DC !important;
}

code {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
}

 

Creando el editor

Una vez realizadas las configuraciones en la Vista, crearemos el control Html que contendrá el editor. Esto lo haremos mediante el Html Helper @Html.TextArea(), el cual "renderizará" una etiqueta Html del tipo <textarea />.

@Html.TextArea("editor", new { rows = 20, style = "width: 100%;", @class = "form-control tinymce" })

Como vemos, le hemos aplicado al control la clase (@classtinymce, esto hará que este <textarea /> se transforme en un editor WYSIWYG Html.

 

Enviando el contenido HTML del editor al Controlador

Normalmente, cuando utilizamos un editor WYSIWYG Html, es por que queremos almacenar el códgo Html generado (por ejemplo en una base de datos) para poder reutilizarlo posteriormente. El caso más común de uso sería el de un Blog, donde crearíamos los Posts a través del editor, para luego guardar en la base de datos el contenido en formato Html.

Es por esto, que lo normal es tener el editor WYSIWYG Html dentro de un <form /> de tipo POST, para poder enviar el contenido al Servidor (Controlador).

        @using (Html.BeginForm("Index", "Home", FormMethod.Post))
        {
            @Html.TextArea("editor", new { rows = 20, style = "width: 100%;", @class = "form-control tinymce" })
            <br />
            <button type="submit" class="btn btn-primary" value="Guardar">
                <span class="glyphicon glyphicon-ok"></span>
                &nbsp;Guardar
            </button>
        }

En la parte del Controlador, recibiríamos el contenido Html del editor de la siguiente manera:

        [ValidateInput(false)]
        public ActionResult Index(string editor)
        {
            // Aquí todo el código ...

            return View();
        }

 

IMPORTANTE: Cuando enviamos código HTML al servidor desde una aplicación ASP.NET MVC, por cuestiones de seguridad, el servidor impide por defecto esta clase de acciones, indicando un error del tipo:  Se detectó un posible valor Request.Form peligroso en el cliente (editor="<p>Hola Mundo!</p>"). Es por esto que debemos indicar en la Acción correspondiente, mediante el atributo [ValidateInput(false)], que sí aceptamos código Html en los POSTs hacia nuestro Controlador, o sea, no validamos la entrada.

  Compartir


  Nuevo comentario

El campo Comentario es obligatorio.
El campo Nombre es obligatorio.

Enviando ...

  Comentarios

No hay comentarios para este Post.



  Etiquetas

.NET Core .NET Framework .NET MVC .NET Standard AJAX ASP.NET ASP.NET Core ASP.NET MVC Bootstrap Buenas prácticas C# Cookies Entity Framework JavaScript jQuery JSON PDF Pruebas Unitarias Seguridad SEO Sql Server SqLite Swagger Validación Web API Web Forms

  Nuevos


  Populares















Utilizamos cookies propias y de terceros para mejorar nuestros servicios y ofrecerle una mejor experiencia de navegación. Si continúa navegando consideramos que acepta su uso. Más información   Acepto