Implementare TinyMCE in ASP.NET

TinyMCE è un editor WYSIWYG per HTML basato su javascript sviluppato da Moxiecode.
E’ un prodotto open source rilasciato sotto licenza LGPL, quindi è possibile modificarlo e ridistribuirlo con l’unico accorgimento di lasciare le informazioni di copyright.

Per ASP.NET c’è un wrapper sviluppato dalla stessa Moxiecode che permette una semplice implementazione dell’editor. Ecco come:

STEP 1
Dalla pagina di download del progetto scaricare il Main Package (pronto all’uso) e il .NET Package.

STEP 2
Caricare il contenuto del Main Package (gli script javascript) in una cartella del progetto ASP.NET e aggiungere un riferimento alla dll Moxiecode.TinyMCE.dll trovata nella cartella bin del .NET Package.

STEP 3
Aprire il file web.config del sito e inserire il seguente XML (se ci sono già altri parametri all’interno del file unirli a questi) per IIS 6 o inferiore:

<configuration>
	<configSections>
		<section name="TinyMCE"
			type="Moxiecode.TinyMCE.ConfigHandler,Moxiecode.TinyMCE"
			requirePermission="false" />
	</configSections>

	<TinyMCE installPath="/js/tiny_mce" mode="src">
		<globalSettings>
			<add key="relative_urls" value="false" />
		</globalSettings>

		<!-- Impostazioni per la compressione -->
		<gzipCompressor
			enabled="yes"
			diskCache="no"
			cachePath="c:\temp"
			expiresOffset="10d"
		/>
	</TinyMCE>

	<system.web>
		<customErrors mode="Off" />
		<!-- Mappings per IIS 6 o inferiore -->
		<httpHandlers>
			<add verb="GET,HEAD,POST"
				path="TinyMCE.ashx"
				type="Moxiecode.TinyMCE.Web.HttpHandler,Moxiecode.TinyMCE" />
		</httpHandlers>
	</system.web>
</configuration>

Per IIS 7 invece:

<configuration>
	<configSections>
		<section name="TinyMCE"
			type="Moxiecode.TinyMCE.ConfigHandler,Moxiecode.TinyMCE"
			requirePermission="false" />
	</configSections>

	<TinyMCE installPath="/js/tiny_mce" mode="src">
		<globalSettings>
			<add key="relative_urls" value="false" />
		</globalSettings>

		<!-- Impostazioni per la compressione -->
		<gzipCompressor
			enabled="yes"
			diskCache="no"
			cachePath="c:\temp"
			expiresOffset="10d"
		/>
	</TinyMCE>

	<system.web>
		<customErrors mode="Off" />
		<!-- Mappings per IIS 7 -->
		<system.webServer>
		<handlers>
			<add name="TinyMCE"
				verb="GET,HEAD,POST"
				path="TinyMCE.ashx"
				type="Moxiecode.TinyMCE.Web.HttpHandler,Moxiecode.TinyMCE" />
		</handlers>
	</system.webServer>
	</system.web>
</configuration>

Il parametro “TinyMCE installPath” deve puntare alla cartella contentente il file tiny_mce.js (scaricato con il Main Package).

STEP 4
All’inizio della pagina .aspx aggiungere la linea:

<%@ Register tagprefix="tinymce" Namespace="Moxiecode.TinyMCE.Web" Assembly="Moxiecode.TinyMCE" %>

e il parametro ValidateRequest=”false”. L’intestazione completa della pagina sarà quindi qualcosa di simile a :

<%@ Page Language="vb" AutoEventWireup="false" ValidateRequest="false" CodeBehind="testo_mod.aspx.vb" Inherits="webtest.testo_mod" %>
<%@ Register tagprefix="tinymce" Namespace="Moxiecode.TinyMCE.Web" Assembly="Moxiecode.TinyMCE" %>

STEP 5
A questo punto è possibile utilizzare l’editor all’interno della pagina inserendo il seguente codice:

<tinymce:TextArea id="testo"
	theme="advanced"
	skin="o2k7"
	height="20"
	plugins="spellchecker,pagebreak,.....   e lista dei plugins necessari"
	theme_advanced_buttons1="cut,copy,paste,pastetext,...."
	theme_advanced_buttons2=""
	theme_advanced_buttons3=""
	theme_advanced_buttons4=""
	theme_advanced_toolbar_location="top"
	theme_advanced_toolbar_align="left"
	theme_advanced_path="false"
	theme_advanced_resizing="true"
	language="it"
	runat="server"
/>

I valori dei vari parametri sono gli stessi del componente javascript.