Sunday, September 21, 2008 3:14 AM
Frozzare
Få TinyMCE att fungera med ASP.NET
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.
Kod
<scrip t 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.
Kod
<scrip t 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.
Kod
<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
i textbox kontrollen. När vi har skrivit i det så ser textbox kontrollens kod ut så här
Resultat
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"></asp:TextBox>
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.
Filed under: TinyMCE