Edición de texto enriquecido con Infragistics editor HTML tanto en jQuery como en ASP.NET MVC

Edición de texto enriquecido con Infragistics editor HTML tanto en jQuery como en ASP.NET MVC

A lo largo de todas las características interesantes introducidas para la versión 11.2 de NetAdvantage para jQuery (léase: nueva cuadrícula jerárquica, árbol, controles combinados) y CTP Charting con Motion Framework, no es tan sorprendente que algunos controles no obtuvieran su parte completa del centro de atención.

9min read

A lo largo de todas las características interesantes introducidas para la versión 11.2 de NetAdvantage para jQuery (léase: nueva cuadrícula jerárquica, árbol, controles combinados) y CTP Charting con Motion Framework, no es tan sorprendente que algunos controles no obtuvieran su parte completa del centro de atención.

Estoy hablando del control HTML Editor basado en jQuery e implementando WYSIWYG. WYSIWYG significa "lo que ves es lo que obtienes" (sigue leyendo sobre ello en Wikipedia), que es exactamente lo que en su esencia este control está destinado a proporcionar. Transformación de los corchetes angulares de apertura y cierre ( "<" y ">") en HTML equivalente: "<"/">". Eso es solo un ejemplo, pero es lo que hace mi editor de blog también, por lo que el navegador puede presentarlos correctamente y no solo, algunos servidores bloquean dicho contenido como una amenaza potencial. Incluso si no lo ha notado, este tipo de funcionalidad se ofrece prácticamente en cualquier lugar donde se admita el contenido generado por el usuario, como este blog, los comentarios, los foros, etc.

¡Y ahora puede proporcionar a sus usuarios ese tipo de funcionalidad utilizando el widget igHtmlEditor y mucho más!

Aquí cabe mencionar que el editor HTML es CTP (Community Technology Preview), lo que significa que todavía se encuentra en la etapa beta de su desarrollo. Por esa razón, hasta su lanzamiento oficial nada estaba escrito en piedra, pero, de nuevo, tampoco hay razón para no probarlo y conocer el control con anticipación. También es aconsejable si utiliza la última versión del servicio.

Empezando

El widget se basa en la interfaz de usuario de jQuery, por lo tanto, al igual que con otros controles de NetAdvantage para jQuery, primero necesitará jQuery y luego la interfaz de usuario de jQuery agregada a su página. Sin embargo, el script para igHtmlEditor no se incluye en el archivo "ig.ui.min.js" predeterminado, sino en su propio "ig.ui.htmleditor.min.js". Este último es en realidad el único archivo de script necesario para incluir después de los de jQuery.

Los estilos predeterminados, con los que quizás ya esté familiarizado, también son obligatorios. Una vez más, le animo a que consulte nuestra Guía de implementación, donde puede leer exactamente cómo encontrar y administrar los recursos necesarios.

Por supuesto, proporcionaré un fragmento de código combinado que puede usar como referencia (suponiendo que tenga carpetas 'Scripts' y 'themes' de forma predeterminada) y agregar el igHtmlEditor a la página es lo más trivial posible: un elemento HTML DIV como contenedor y una línea de script para crear una nueva instancia del widget en JavaScript y es igual de fácil en ASP.NET MVC. Fragmentos de código combinados para ambos:

<!-- ## Javascript/HTML ## -->
    <!-- CSS -->
    <link href="../../themes/min/ig/jquery.ui.custom.min.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/base/ig.ui.min.css")" rel="stylesheet" type="text/css" />
    <!-- Scripts -->
    <script src="../Scripts/jquery.min.js"></script>
    <script src="../Scripts/jquery-ui.min.js"></script>
    <script src="../Scripts/ig.ui.htmleditor.min.js"></script>
    <!-- in the body of the document: -->
    <div id="HtmlEditor1"></div>
    <!-- initialize the editor on document ready: -->
    <script type="text/javascript">
        $(document).ready(function () {
            $("#HtmlEditor1").igHtmlEditor();
        });
    </script>
 
<!--## ASP.NET MVC  ##-->
    <!-- CSS -->
    <link href="@Url.Content("~/Content/themes/min/ig/jquery.ui.custom.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/ig.ui.min.css")" rel="stylesheet" type="text/css" />
    <!-- Scripts -->
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/ig.ui.htmleditor.min.js")" type="text/javascript"></script>
    <!-- in your View: -->
    @using Infragistics.Web.Mvc
    @( Html.Infragistics().HtmlEditor().Render()
    )

¡Características, características, características!

A pesar de que no está terminado, el widget jQuery Html Editor tiene una impresionante variedad de características. En su implementación actual casi todos ellos se proporcionan sin necesidad de mayor personalización, por lo que desde la perspectiva del desarrollador no hay tantas cosas que tenga que configurar y los usuarios siempre obtienen un puñado. Casi todo a lo que el usuario tiene acceso se encuentra en un área de barra de herramientas en la parte superior y las opciones se agrupan ordenadamente en conjuntos relevantes.

La mejor parte es que entre ellos se pueden encontrar herramientas para el formato de texto enriquecido que casi cualquier usuario reconocería de inmediato y se sentiría cómodo usando. Una experiencia de edición completa que solo se reconoce después de una demostración visual:

Formato de texto enriquecido en el editor html de jQuery

Todo en la captura de pantalla (bueno, excepto el ancho del control que modifiqué para que quepa en esta página) es como el widget lo crea de forma predeterminada: fuentes y tamaños, negrita y cursiva, subrayado y tachado, opciones de alineación de texto, listas y viñetas, control de sangría, etc. Además de las herramientas en la parte superior, el control también muestra convenientemente la ruta DOM actual completa y el usuario puede hacer clic en cada elemento del árbol DOM para que su contenido se destaque en el área de edición. Eso es realmente genial cuando el usuario necesita estar al tanto de cómo se maneja su entrada detrás de escena, pero si eso no es suficiente, bueno, el widget proporciona funcionalidad para cambiar entre el 'diseño' predeterminado y la vista de origen con solo hacer clic en un botón:

Vista de código fuente HTML del editor HTML de jQuery

Esta es la fuente de las fuentes que se muestran en la captura de pantalla anterior y también puede ver que se aplican como estilos a los contenedores.

Además, también había texto copiado, que estaba allí para mostrar que el Editor viene con soporte para el Portapapeles para todas las operaciones comunes: cortar, copiar y pegar. Y no se trata solo de que se conserven los diferentes estilos de texto dentro del área de edición, sino que también puedes pegar texto enriquecido y su formato seguirá siendo el que viste originalmente. Puedes copiar de una página web y pegarla en el editor, pero eso no parece tan impresionante teniendo en cuenta que todo está basado en HTML. Lo que realmente puedes hacer es copiar de MS Word, sí, puedes y se ve así:

Compatibilidad con el portapapeles del editor html de jQuery

Además, el usuario tiene una manera fácil de insertar contenido, además de pegarlo. La barra de herramientas ofrece diálogos para insertar imágenes y enlaces:

Diálogos del editor html jQuery para agregar una nueva imagen o enlace.

Hay un cuadro de diálogo más disponible, y permite al usuario agregar un elemento de tabla HTML con poco o ningún esfuerzo y definir el número de columnas y filas de forma natural arrastrando su puntero al tamaño deseado:

Diálogos del editor html jQuery para agregar una tabla.

En la barra de herramientas también se pueden encontrar botones para eliminar o agregar nuevas filas y columnas con un solo clic.

Personalización

Cuando se menciona que no hay mucho que tenga que configurar desde el punto de vista de los desarrolladores, no significa que el widget no se pueda personalizar para satisfacer sus necesidades. Al configurar el control, se le permite definir los elementos de la barra de herramientas que se presentarán a los usuarios. El valor predeterminado es, por supuesto, "all", pero la propiedad activeToolbars permite definir un conjunto personalizado de barras de herramientas. La propiedad acepta una sola cadena que contiene los nombres de las barras de herramientas que se van a usar y aquí hay una lista de las predeterminadas:

  • fontProperties
  • textFormat
  • textAlign
  • textIndent
  • mesa
  • source

Pero seguro que no te engañas, aquí es donde se detiene la personalización: hay, por supuesto, una opción para agregar tu propia barra de herramientas. Todas las barras de herramientas contienen elementos de botón y combo, es decir, igButton e igCombo, que se pueden agregar como elementos a la barra de herramientas personalizada. El igButton es nuestra versión con estilo del botón de interfaz de usuario de jQuery y el igCombo es parte de nuestro producto NetAdvantage para jQuery.

Por ejemplo, agreguemos un botón que se vincule a Infragistics página de inicio a la barra de herramientas y le agregué un bonito logotipo por si acaso. Aquí está el fragmento para agregar el suyo propio a la propiedad 'toolbars' junto con la configuración de los activos tanto en JavaScript como en ASP.NET MVC 3 con sintaxis de encadenamiento y Razor:

<!-- ## In Javascript ## -->
<script type="text/javascript">
    $(document).ready(function () {
        $("#HtmlEditor1").igHtmlEditor({
            width: '750',
            toolbars: [
            {
                name: 'custom',
                items: [
                {
                    type: 'igButton', link: { href: 'http://es.infragistics.com', target: '_blank' }
                }]
            }],
            activeToolbars: 'fontProperties textFormat textIndent source custom'
        });
    });
</script>
 
<!-- ## In ASP.NET MVC ## -->
@( Html.Infragistics().HtmlEditor()
            .Width("750")
            .Toolbars(toolbars =>
                {
                    toolbars.AddToolbar().Name("custom").Items(items =>
                        {
                            items.AddIgButtonItem()
                                .Link(link =>
                                {
                                    link.Href("http://es.infragistics.com").Target("_blank");
                                });
                        });
                })
            .ActiveToolbars("fontProperties textFormat textIndent source custom")
            .Render()
)

El suyo se agregará automáticamente, porque las barras de herramientas activas predeterminadas son 'todas', pero, por supuesto, puede nombrarlo e incluirlo en la lista que se utilizará como se ve arriba. Y el mismo método se puede usar para agregar igCombo(s) o simplemente más botones. Así es como se puede ver el resultado del código anterior (observe que el último botón es nuestra adición a la barra de herramientas personalizada y al hacer clic en él se abre la página de inicio de Infragistics en una nueva pestaña/ventana):

Una barra de herramientas personalizada con un botón agregado al editor html de jQuery.

Conclusión

El editor HTML de jQuery proporciona un formato de texto enriquecido impulsado por scripts puros del lado del cliente y ha establecido el rumbo para ofrecer una combinación de características familiares y bastante instintivas, y el objetivo final es proporcionar al usuario una experiencia increíble y un conjunto de herramientas completo. Y la capacidad de crear su propio conjunto de herramientas y agregarlo a la barra de herramientas significa que este control puede ser tan personalizable como esté dispuesto a hacerlo. Y como se espera, se puede diseñar con jQuery Themeroller y también puede encontrar instrucciones de eso en la Guía de implementación vinculada anteriormente.

Puede visitar nuestros ejemplos en línea de NetAdvantage para jQuery y también puede descargar el proyecto de demostración de este blog, que contiene un proyecto MVC3 APS.NET con implementaciones de Razor y jQuery solamente.

jQuery Cómo
Solicitar una demostración