ASPX + TinyMCE

En algunas ocasiones es necesario crear aplicaciones web, cuyos formularios soliciten información a los usuarios (Eje: El registro a un diplomado virtual), en donde estos puedan agregar enlaces a alguna pagina, crear tablas para organizar contenidos, enumerar en lista algunas características o elementos, resaltar texto o hacerlo mas grande.

Claro!!!.. Las respuesta es un TextBox que tenga la propiedad de poder editar contenido como HTML. Ya que nativamente el control ASP TextBox no cuenta con esta propiedad, es necesario utilizar otras tecnologías como Ajax o en este caso JQuery.

Lo primero que necesitamos es descargar el plugin TinyMCE, un editor de contenido HTML muy popular, que además de todo cuenta con plugins para WordPress, Joomla, etc.

http://www.tinymce.com/tryit/basic.php

Agregamos el directorio tiny_mce a nuestro proyecto, que entre otras cosas continene:

Los archivos .js, los temas, lenguajes, etc.

Luego de esto, ubicamos el asrchivo donde irá el control HTML, y configuramos el plugin:

<script src="tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode: "textareas",
theme: "advanced",
plugins: "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions
,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste
,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,
template,wordcount,advlist,autosave",


// Theme options
theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,justifyleft
,justifycenter,justifyright,justifyfull,fontselect,fontsizeselect,
|,tablecontrols",
theme_advanced_buttons2: "bullist,numlist,link,unlink,image,code",
theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,
sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons3: "",
theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|
,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,
template,pagebreak,restoredraft",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,

// Example content CSS (should be your site CSS)
// using false to ensure that the default browser settings are used for
best Accessibility
// ACCESSIBILITY SETTINGS
content_css: false,
// Use browser preferred colors for dialogs.
browser_preferred_colors: true,
detect_highcontrast: true,

// Drop lists for link/image/media/template dialogs
template_external_list_url: “lists/template_list.js”,
external_link_list_url: “lists/link_list.js”,
external_image_list_url: “lists/image_list.js”,
media_external_list_url: “lists/media_list.js”,
// Style formats
style_formats: [
{ title: ‘Bold text’, inline: ‘b’ },
{ title: ‘Red text’, inline: ‘span’, styles: { color: ‘#ff0000’} },
{ title: ‘Red header’, block: ‘h1’, styles: { color: ‘#ff0000’} },
{ title: ‘Example 1’, inline: ‘span’, classes: ‘example1’ },
{ title: ‘Example 2’, inline: ‘span’, classes: ‘example2’ },
{ title: ‘Table styles’ },
{ title: ‘Table row 1’, selector: ‘tr’, classes: ‘tablerow1’ }
],

// Replace values for the template plugin
template_replace_values: {
username: “Some User”,
staffid: “991234”
}
});
</script>

Y finalmente el control que por default debe ser un textarea. Agregamos el
runat=”server” para verlo del lado del servidor y listo.

<body>
<form id="form1" runat="server">
<div>
<textarea runat="server" style="background-color:#000;
width: 300px" id="Texto" name="elm1" rows="15" cols="80"
></textarea>
</div>
</form>
</body>

Error “A potentially dangerous Request.Form value was detected”

Solucion 1:
Uso de las clases HTMLEncode y HTMLDecode.

http://blog.tentaclesoftware.com/archive/2012/05/21/asp-net-4-0-tinymce-and-
ldquoa-potentially-dangerous-request.aspx

Solucion 2:
Deshabilitar la RequestValidation.

Default.ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
Inherits="TinyMCE.Default" ValidateRequest="false">

Web.Config

<location path="Default.aspx">
<system.web>
<httpRuntime requestValidationMode="2.0" />
</system.web>
</location>

Gracias.