Ajax Control Toolkit–Release de Julio con Nuevo Control Editor HTML

Fuente: http://stephenwalther.com/blog/archive/2011/08/01/ajax-control-toolkit-july-2011-release-and-the-new-html.aspx
Este articulo es una traducción y pequeña adaptación del articulo original  de phen  Walter.

Existe un nuevo release de Julio 2011 de la excelente Suite de Controles Ajax Control Toolkit, incluye una importante cantidad de Bugs Fixes y un completamente nuevo control extensor: un editor HTML. Podemos descargar este release visitando el sitio  en CodePlex de esta suite:

http://AjaxControlToolkit.CodePlex.com

Utilizando el nuevo control Editor HTML

Podemos usar este nuevo control, extendiendo un control TextBox estándar, este nuevo control soporta texto enriquecido como  negritas, cursivas, lista de viñetas, listas numeradas, distintas tipografías y diferentes colores de letra y de fondo

image

El siguiente código muestra como el codigo necesario par extender el control ASP.NET TextBox con el HtmlEditorExtender

<asp:ToolkitScriptManager ID=”ToolkitScriptManager1″ runat=”server”>

</asp:ToolkitScriptManager>

       

<asp:TextBox ID=”txtComments” TextMode=”MultiLine” 
    
Columns=”60″ Rows=”8″ runat=”server” 
/>

<asp:HtmlEditorExtender ID=”HtmlEditorExtender1″ 

   TargetControlID=”txtComments” runat=”server” />

 

Esta código tiene los siguientes tres controles:

  • ToolScriptManager –  Control encargado del render de todos los script requeridos por el Ajax Control Toolkit
  • TextBox – El control ASP.NET que será extendido para mostrar el editor.
  • HtmlEditorExtender – El control extensor que modifica la funcionalidad del textbox.

Liviano y Compatibilidad con HTML5

Este nuevo editor es compatible con todas las ultimas versiones de los browsers, esto es Firefox 5, Google Chrome 12, y Safari 5. Además el editor HTML es compatible con IE6 y versiones más recientes.

Este control es muy liviano, debido a que utiliza las ventajas del atributo HTML5 ContentEditable, con el cual no se necesita utilizar un iframe o soluciones complejas en el navegador. De hecho , nos podremos sorprender por la simpleza del código generado.

Barra de Botones personalizable

Dependiendo del tipo de aplicación que estamos construyendo, buscaremos mostrar diferentes botones en la barra del control HTML Editor Extender. Uno de los objetivos de diseño del control fue que el personalizar la barra de botones sea una tarea sencilla para los desarrolladores.

Imaginémonos, por ejemplo, que queremos usar el HTML Editor Extender para aceptar comentarios en un blog . En este caso , puede que deseemos restringir las posibilidades de formato solo a negrita y cursiva.

image

El siguiente código muestra como personalizar la barra de herramientas para obtener solo las opciones de negrita y cursiva:

 <asp:HtmlEditorExtender ID=”HtmlEditorExtender1″ 

      TargetControlID=”txtComments” runat=”server”>

            <Toolbar>

                <asp:Bold />

                <asp:Italic />

            </Toolbar>

</asp:HtmlEditorExtender>

En la página de Stephen Walther (Este artículo es una traducción y semi-adaptación al que el escribió), puedes ver una lista completa de los  “botones”  actualmente soportados:

  • Undo
  • Redo
  • Bold
  • Italic
  • Underline
  • StrikeThrough
  • Subscript
  • Superscript
  • JustifyLeft
  • JustifyCenter
  • JustifyRight
  • JustifyFull
  • InsertOrderedList
  • InsertUnorderedList
  • CreateLink
  • UnLink
  • RemoveFormat
  • SelectAll
  • UnSelect
  • Delete
  • Cut
  • Copy
  • Paste
  • BackgroundColorSelector
  • ForeColorSelector
  • FontNameSelector
  • FontSizeSelector
  • Indent
  • Outdent
  • InsertHorizontalRule
  • HorizontalSeparator

Compatibilidad con la Librería AntiXSS

Cuando se utiliza este control, es altamente recomendado que utilice junto a la librería AntiXSS. Está mas que claro que si dejamos enviar cualquier cosa a los usuarios de la pagina, podemos ser víctimas de ataques Cross-Site Scripting.

Cosas que faltan y que se vienen.(no todo es perfecto)
Se hecha de menos: Adjuntar imágenes, video, tener una vista de html, poder ingresar tablas.

Revisa más información de este control que de suma a los demás controles ya existentes del Ajax Control Toolkit en :
http://stephenwalther.com/blog/archive/2011/08/01/ajax-control-toolkit-july-2011-release-and-the-new-html.aspx

Saludos,
Gonzalo

Un comentario en “Ajax Control Toolkit–Release de Julio con Nuevo Control Editor HTML”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *