Få TinyMCE att fungera med ASP.NET

Hej.

I denna artikel så hade ja tänkt ta upp hur man får editorn TinyMCE 3.1.0.1 att fungera med ASP.NET. För i ASP.NET skriver man inte input, textarea och sånna saker likadant som i Html.

Första så börjar vi med att ladda ner TinyMCE Main package från TinyMCE's hemsida, om du inte har den på datorn någon stans.
Så vi packar upp .zip filen, så får vi en mapp som heter tinymce_3_1_0_1 på den platsen där din .zip fil hamnat. Inne i mappen finns det två olika mappar, en heter examples och den andra jscripts. Examples mappen behöver vi inte använda, ifall du inte vill kolla på några exempel.

Det är mappen jscripts som är viktig här, i den mappen finns det en mapp som heter tiny_mce, som innehåller alla filer för TinyMCE.

Nu öppnar vi Visual Studio 2005/2008 och skapar en ny ASP.NET webbsida.
(File -> New -> Website)

Nu när vi har skapat en ny webbsida, så öppnar vi mappen där vi skapade webbsidan, och klistrar in jscripts mappen. Man kan också dra jscripts mappen på Solution Explorer, där det står var din webbsida finns på din hårddisk.

Nu när vi har mappen jscripts i samma mapp som våran webbsida så kan vi börja med koden. Vi öppnar Default.aspx, ifall inte Visual Studio redan gjort det. Där ser ni att det finns vanlig html kod. Vi ska skriva en bit kod och lägga inom head taggen.

<script src="jscripts/tiny_mce/tiny_mce.js" type="text/javascript"></script>

Med hjälp av script taggen så har vi "länkat" in tiny_mce.js filen, som gör editorn möjlig. "src=" är sökvägen till .js filen. "type=" är vilken typ av script, som i det här fallet är javascript och skrivs "text/javascript".

Direkt efter denna tagg, så ska vi skriva in en ny script tag.

<script type="text/javascript">
    tinyMCE.init({
        mode : "textareas",
        theme : "simple"


    });

</script>

Nu har vi sagt åt webbsidan att leta efter tiny_mce.js filen, samt att det andra kodstycket säger åt webbsidan, vilket "mode" av TinyMCE vi vill ha, och "theme" säger åt editorn vilket av dom standard teman vi vill ha.

Men för att detta ska fungera nu, så ska vi dra in en komponent i Default.aspx sidan. Komponeten vi ska dra in är "asp:textbox", som i Toolboxen heter Textbox. Vi placerar komponten mellan form taggen.

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

Så ser nu textbox komponentens kod ut efter vi har dragigt in den i asp.net sidan. Men TinyMCE fungerar inte än, eftersom att nu är textboxen iställd på 1 rad, som input text.
Vi behöver lägga till en sak till i koden som gör det möjligt att använda textbox komponenten som många rader(multi lines) .

Så vi skriver in

TextMode="MultiLine"

i textbox kontrollen. När vi har skrivit i det så ser textbox kontrollens kod ut så här

Så nu bör er sida ha två script taggar i head taggen, och en textbox kontroll i form taggen. Nu kan ni test köra sidan, och se att det har kommit fram en editor. Nu har vi lyckats "installerat" TinyMCE med en ASP.NET sida.

Skapades: 2008-07-03 09:00:02
Skribent: Frippe
Lästs 1004 gånger
Betyg: 0 (totalt 5 röster)

Kommentarer

Ingen har kommenterat denna artikel än.