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

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 (@class) tinymce, 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.