Jag har fått ett problem med TinyMCE editorn, jag har skrivit i deras forum men inte fått nåt svar. Problemet är detta:

Allt funkar kanon, men när jag lägger in till exempel denna rad:
<p id="left">
Då syns den som den ska på sidan, men när jag laddar in det på nytt i TinyMCE för en eventuell redigering så syns inte raden utan den hanteras som en rikgtig p-tagg. Jaghar även försökt skriva &lt; och &gt; men samma sak händer där. Nån som har en lösning på hur jag ska göra?

Jag tror att du behöver byta ut < mot &lt; när du laddar in texten i TinyMCE. Du lägger väl in texten i en div på sidan?

Jo, jag lägger det i en div. Men om jag byter ut < mot &lt; så ändras ju även formatering på det som är skrivet i Tiny tillexempel en inlagd bild eller en länk?

När du lägger till, menar du lägger till som i att du skriver det mauellt i tinymce:s editor, sparar, och öppnar, eller menar du att lägga till det t.ex. på servern?

Sorry att jag var otydlig:(

Jag menar om jag skriver in en text i tiny och lägger till en bild och en länk och lägger till det i databasen, då visas allt som dt ska på sidan när jag hämtar ut det. Jag vill kanske också skriva in till exempel <div class="boldText">Här i blir texten fet</div> och att det ska visas precis så, alltså inte att det ska bli en div av det.

Jaghar försökt på alla möjliga sätt att göra det men kan f...n inte komma på hur jag ska göra. Om jag tänker rätt så kan jag inte använda typ Replace("<", "&gt;") för då ändras ju även de taggarna till bilden och länken som ska visas. Det kan vara mycket fler element en bara bild och länk.

Finns kanske nåt med javascript som jagkan använda och göraom det direkt jag skriver in det? Hoppas ni förstår vad jag menar, jag har en förmåga att krångla till det:(

Hur ser det ut när det kommer till servern? Posta ett exempel där du dels har lagt in en bild, och dels skrivit text med taggar i

Detta är som det ser ut i databasen:
<p>Detta &auml;r vanlig text jag skrivit.</p>
<p><img style="border: 0px;" src="../../department/blogs/blogGraphics/grdOrigin.jpg" alt="" width="600" height="357" /><br />&lt;div class="boldText"&gt;Detta &auml;r en div d&auml;r jag vill att att htmlkoden ska synas&lt;/div&gt;</p>

Så här ser det ut i tinys html
<p>Detta &auml;r vanlig text jag skrivit.</p>
<p><img style="border: 0px;" src="blogGraphics/grdOrigin.jpg" alt="" width="600" height="357" /><br />
<div class="boldText">Detta &auml;r en div d&auml;r jag vill att att htmlkoden ska synas</div>
</p>

Så långt stämmer det ju, men:
I tiny syns inte diven nu bara texten "Detta är en div där jag vill att htmlkoden ska synas". Det blir ju tokigt om man ska ändra något i en tagg man vill visa om man inte ser den:(

Hm, ok, då har jag förstått problemet i alla fall :)

Kör med HttpUtility.HtmlEncode() så ska det nog lösa problemet :)

(Hittade en sida som förklarar problemet: http://wiki.moxiecode.com/index.php/TinyMCE:FAQ#TinyMCE_encodes_.3C_and_.3E_characters_in_written_text.3F)

Tackar, ska kika den länken inatt.

Det blir inget bra att göra så. Allt blir ju som sagt encodat så även bilder och sånt encodas ju. Ska se på det här med bbCode.

Har du prövat? För det är så problemet ska lösas nämligen.

Btw, använder du div-tag eller textarea-tag att lägga allting i?

När jag laddar in det i tiny så läggs det ju i textarea, när jag laddar det till sidan så läggs det i en tabell. Men på sidan visas det som dt ska, det är bara i tiny elementen försvinner.

Jo, jag testade. Jag ska ändra tillbaka och klistra in resultatet.

Detta får jag ut på sidan:
<p>Detta &auml;r vanlig text</p> <p><img src="../department/blogs/blogGraphics/grdOrigin.jpg" alt="" /></p> <p>&lt;div&gt;Denna div vill jag ska synas.&lt;/div&gt;</p>

Jag har detta i code behind
entry.Body = HttpUtility.HtmlEncode(Request.Form["elm1"]);

Detta i Html sidan
<textarea id="elm1" name="elm1" style="width:630px; height:500px;" >
<%#Eval("body") %>
</textarea>

Du har htmlencode på fel ställe, du ska ha det där du skriver ut texten i textarean

Det blir samma sak:(

Nuhar jag encoding här: <%#Eval(HttpUtility.HtmlEncode("body")) %>
Men skriver jag < div>Min test< /div> så funkar det nu. Jag får stå ut med att göra ett mellanslag, eller det måste jag ju kunna lägga till automatiskt när jagsparar koden.

Det låter helt klart mystiskt måste jag säga :/

Jag har säkert gjort nåt annat fel nånstans, men jag fattar inte en annan sak. Om jag lägger in en bild <img osv... då måste ju den också bli encodad? Det blir den ju nu också. Jag menar jag kanske skriver in hur man skriver ett img-element och då ska ju det bli encodat. Förstår du mitt resonemang?

Jag kopierar in all kod jag har till det om jag ahr gjort nåt galet, eller rättare sagt var jag har gjort det:)

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

// Theme options
///theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,
justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect",

//theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,
|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,",

//theme_advanced_buttons3: "hr,removeformat,visualaid,|,sub,sup,|,charmap,iespell,media,advhr,
|,print,|,ltr,rtl,|,fullscreen,insertdate,inserttime,preview,|,forecolor,backcolor",

//theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,
spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,
pagebreak,|,insertfile,insertimage",

//theme_advanced_buttons1: "image,emotions",

theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: false,

// Example content CSS (should be your site CSS)
content_css: "css/example.css",

// Drop lists for link/image/media/template dialogs
template_external_list_url: "js/template_list.js",
external_link_list_url: "js/link_list.js",
external_image_list_url: "js/image_list.js",
media_external_list_url: "js/media_list.js",

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

<asp:Label ID="lblError" runat="server" CssClass="boldText redText" />
<asp:Label ID="lblOk" runat="server" CssClass="boldText greenText" />
<div class="layInfoContent regText padding" style="float: left; width: 634px; margin: 0px 0px 10px 5px;">
<asp:GridView ID="grdArticle" runat="server"
ShowHeader="false" AutoGenerateColumns="false"
GridLines="None" Width="634px"
AlternatingRowStyle-BackColor="#f3f1f1"
DataKeyNames="blogEntryID"
onrowcancelingedit="grdArticle_RowCancelingEdit"
onrowediting="grdArticle_RowEditing"
onrowdeleting="grdArticle_RowDeleting"
onrowupdating="grdArticle_RowUpdating">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<table style="width: 100%">
<tr>
<td colspan="2" style="text-align:center;">
<h1><%#Eval("title") %></h1>
</td>
</tr>
<tr>
<td colspan="2" style="border-bottom:1px solid #cccccc;">
<%#Eval("body") %>
</td>
</tr>
<tr>
<td>Publicerad: <%#Eval("datePublished".ToString()) %></td>
<td>Uppdaterad: <%#Eval("updated").ToString() %></td>
</tr>
<tr>
<td>
<asp:Label ID="lblReadComments" runat="server" CssClass="italicText">
Kommentarer(<%#Eval("totalComments") %>)
</asp:Label>
</td>

</tr>

<asp:LoginView ID="LoginView1" runat="server">
<RoleGroups>
<asp:RoleGroup Roles="admin">
<ContentTemplate>
<tr>
<td>
<asp:LinkButton ID="lbEdit" runat="server" CommandName="Edit" Text="Ändra" />
<asp:LinkButton ID="lbDelete" runat="server" CommandName="Delete" Text="Radera" />
<cc1:ConfirmButtonExtender ID="ConfirmButtonExtender1"
runat="server" TargetControlID="lbDelete"
ConfirmText="Vill du verkligen radera denna post? Det går inte att ångra.">
</cc1:ConfirmButtonExtender>
</td>
</tr>
</ContentTemplate>
</asp:RoleGroup>
</RoleGroups>
</asp:LoginView>

</table>
</ItemTemplate>
<EditItemTemplate>
<table>
<tr>
<td>
<asp:TextBox ID="txtEntryHeader"
runat="server" Text='<%#Bind("title") %>' />
</td>
</tr>
<tr>
<td>
<textarea id="elm1" name="elm1" style="width:630px; height:500px;" >
<%#Eval(HttpUtility.HtmlEncode("body")) %>
</textarea>
<br />
<%-- [Toggle WYSIWYG] --%>
</td>
</tr>
<tr>
<td>
<asp:LinkButton ID="lbUpdate"
runat="server" CommandName="Update" Text="Uppdatera" />
<asp:LinkButton ID="lbCancel"
runat="server" CommandName="Cancel" Text="Avbryt" />
</td>
</tr>
</table>
</EditItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>

<asp:Panel ID="pnlWriteCommentsPanel" runat="server">
<div class="layInfoContent regText padding" style="float: right; width: 634px; margin: 10px 0px 10px 5px;">
<h3>Lägg till en kommentar</h3>
<asp:Label ID="lblCommentError" runat="server" CssClass="boldText redText" />
<asp:Label ID="lblCommentOk" runat="server" CssClass="boldText greenText" />
Skriv gärna en kommentar till artikeln här.
<br /><br />

Ditt namn:
<asp:TextBox ID="txtSender" runat="server" />
<br /><br />
<textarea name="elm2" id="elm2" style="width:100%;">
</textarea>
<br />
<asp:Button ID="btnAddComment" runat="server" Text="Lägg till kommentar"
onclick="btnAddComment_Click" />
</div>
</asp:Panel>

<asp:Panel ID="pnlReadCommentsPanel" runat="server">
<div class="layInfoContent regText padding" style="float: right; width: 634px; margin: 10px 0px 10px 5px;">
<h3>Läs kommentarer</h3>
<asp:GridView ID="grdComments" runat="server" AutoGenerateColumns="false"
ShowHeader="false" GridLines="None" Width="100%">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<div style="background-color:#f3f1f1;" class="greyBorder">
<table style="width:100%">
<tr>
<td colspan="2"><%#Eval("comment") %></td>
</tr>
<tr>
<td style="text-align:right">
<%#Eval("commentSender") %>, <%#Eval("commentDate") %>
</td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</asp:Panel>

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
bindControls();

lblOk.Text = "";
lblError.Text = "";
lblCommentError.Text = "";
lblCommentOk.Text = "";
}

protected void bindControls()
{
int articleID = int.Parse(Request.QueryString["articleID"].ToString());
grdArticle.DataSource = BlogEntryAccess.GetEntryByID(articleID);
grdArticle.DataBind();

grdComments.DataSource = CommentAccess.GetCommentsByEntry(int.Parse
(Request.QueryString["articleID"].ToString()));
grdComments.DataBind();

}

protected void grdArticle_RowEditing(object sender, GridViewEditEventArgs e)
{
grdArticle.EditIndex = e.NewEditIndex;
bindControls();
}

protected void grdArticle_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
grdArticle.EditIndex = -1;
bindControls();
}

protected void grdArticle_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
int entryID = int.Parse(grdArticle.DataKeys[e.RowIndex].Value.ToString());

try
{
BlogEntryAccess.DeleteEntry(entryID);
lblOk.Text = "Posten är raderad";
bindControls();
}
catch (Exception ex)
{
lblError.Text = ex.Message;
}
}

protected void grdArticle_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
BlogEntry entry = new BlogEntry();

entry.BlogEntryID = int.Parse(grdArticle.DataKeys[e.RowIndex].Value.ToString());
//blog.BlogName = ((TextBox)grdBlogs.Rows[e.RowIndex].FindControl("txtHeader")).Text;
entry.Title = ((TextBox)grdArticle.Rows[e.RowIndex].FindControl("txtEntryHeader")).Text;
entry.Body = Request.Form["elm1"];

try
{
bool result = BlogEntryAccess.UpdateEntry(entry);
if (result)
{
lblOk.Text = "Posten är uppdaterad";
bindControls();
}
}

catch (Exception ex)
{
lblError.Text = ex.Message;
}

}
protected void btnAddComment_Click(object sender, EventArgs e)
{
BlogComment comment = new BlogComment();

comment.BlogEntryID = int.Parse(Request.QueryString["articleID"].ToString());
comment.CommentSender = txtSender.Text;
comment.Comment = Request.Form["elm2"];

if (comment.CommentSender == "")
comment.CommentSender = "IU(Ingen Uppgift)";

try
{
CommentAccess.AddComment(comment);
lblCommentOk.Text = "Posten är sparad";
bindControls();
}
catch (Exception ex)
{
lblCommentError.Text = ex.Message;
}
}
</code>

Det ser lite mystiskt ut, det borde vara: HttpUtility.HtmlEncode(Eval("body").ToString()) istället för tvärtom?

[edit]Grejjen är att _allting_ ska vara encodat när det ligger i en textarea. Tänk ett steg längre: kan du ens ha en bild i en textarea? Och "specialfallet": Hur gör du om du i din textarea vill skriva ut html-koden för, just det, en textarea? Så fort du kommer till slut-taggen så blir det problem om du inte kör htmlencode på rubbet[/edit]

Tjoho, nu funkar det. Jag hade vänt på det som du sa jag ändrade till det du skrev så funkar det klockrent. Men hur kandet göra det? Jag fattar inte.

Bild inlagd som ska visas och den visas som den ska.
<img src="../department/blogs/blogGraphics/grdOrigin.jpg" alt="" width="300" />


Bild jaghar skrivit in som inte ska visas utan man ska se hela htmlkoden, och det gör man.
<img src="../department/blogs/blogGraphics/grdOrigin.jpg" alt="" width="300" />

Vad är skillnaden?

Nu ser jag absolut ingen skillnad, så jag tror att det är ett tankefel :)

Om vi tänker oss att vi har html-koden för en bild:
<img src="kaka" />

Om vi skriver ut den på sidan så kommer den visa bilden "kaka".

Om vi nu ersätter < med &lt; och > med &gt; för att istället skriva ut html-koden på sidan så kommer html-koden att se ut såhär:
&lt;img src="kaka" /&gt;

Är du med såhär långt?

Vi går nu vidare: När vi nu bygger ett väldigt enkelt system för att kunna spara en text på servern, och behöver någonting att editera texten med, så skapar vi ett formulär innehållandes en textarea:
<textarea></textarea>

Eftersom att vi vill skriva in det som redan finns lagrat på servern i textarean så gör vi det nu:
<textarea><img src="kaka" /></textarea>

Den här koden innehåller dock ett fel: en textarea får _inte_ innehålla några taggar! Vi måste ersätta alla < och > med &lt; respektive &gt;. Vi gör ett nytt försök:
<textarea>&lt;img src="kaka" /&gt;</textarea>

När vi visar den sidan i webbläsaren så kommer _webbläsaren_ att skriva ut &lt; som < respektive &gt; som >. Precis som om du skulle skriva &lt; eller &gt; var som helst på sidan. Det är också det som webbläsaren visar som kommer _skickas_ till servern, inte det som står i html-koden.

Hänger du med såhär långt?

Vi tar det nu ett steg längre: Du har nu sparat sidan, där det i _textarean_ (inte html-koden!) står:
<img src="kaka" />
och ska nu skriva ut sidan. Html-koden som servern spottar ut när den visar sidan ser ut såhär:
<img src="kaka" />

Webbläsaren kommer nu visa _bilden_ "kaka".

Ponera nu att du inte vill visa _bilden_ utan vill visa _html-koden_ för bilden. Vad måste du göra då på _sidan_? Jo, du måste ersätta alla < och > med &lt; respektive &gt;. Sagt och gjort, du ändrar på sidans html-kod på servern så den ser ut som:
&lt; src="kaka" /&gt;

vilket innebär att sidan i webbläsaren kommer _se ut_ som följande:
<img src="kaka" />

Om vi nu hoppar tillbaka till redigering: När vi tittar på våran textarea i _webbläsaren_ så måste det då stå följande i _rutan_ (ej html-koden!):
&lt; src="kaka" /&gt;

Nu får vi problem igen: &-tecknet ställer till det för oss. Om vi skriver den där koden rakt upp-och-ned mellan textarea-taggarna så kommer textarean att bara visa:
<img src="kaka" />

Vi måste göra något åt &-tecknet. Vi ersätter &-tecknet med &amp; så att textarean visar rätt:
<textarea>&lt; src="kaka" /&gt;</textarea>
blir
<textarea>&amp;lt; src="kaka" /&amp;gt;</textarea>

Webbläsaren kommer nu visa en ruta innehållandes _texten_:
&lt; src="kaka" /&gt

Det är också det som skickas till servern. När sedan sidan visas så kommer webbläsaren att översätta &lt; resp. &gt; så webbläsaren skriver ut _texten_:
<img src="kaka" />


----------------


Som du ser är det skillnad mellan vad som står i html-koden respektive vad som visas i textarean respektive vad som visas på sidan. För att skriva ut tecknet "<" på sidan så måste man köra htmlencode på det _två_ gånger innan man stoppar in det mellan textarea-taggarna för redigering.

När du skriver i TinyMCE så sköter TinyMCE om att konvertera _en gång_ för att det ska se rätt ut på _sidan_. Likaså konverterar den _inte_ någonting när du lägger in t.ex. en bild. Bilden kommer då att står där med <img src="kaka" /> men din div-tagg kommer stå encodad med &lt;div&gt;. Det andra steget, det för att det ska bli rätt i textarean, det måste du själv stå för genom ett anrop till HtmlEncode.

Blev det lite, lite begripligt nu? (Ursäkta lång text.. :P )

Japp, nu är jag med.

Tusen tack:)

Vad bra :)

Jag har läst det om igen nu och det var ett mycket uttömmande svar:)

Det är kanon när ni som är riktigt dukltiga hjälper oss medelmåttor och delar med er av er kunskap.

Återigen tusen tack, jag ahde aldrig löst detta själv.

Fick du svar på varför
HttpUtility.HtmlEncode(Eval("body").ToString())
fungerar men inte
Eval(HttpUtility.HtmlEncode("body")) ?


Den läser funktionerna innifrån alltså försöker den (i andra exemplet) först köra
HttpUtility.HtmlEncode("body") vilket returnerar "body"
så Eval får samma parameter som tidigare:
Eval("body")


Men i det fungerande exemplet:
Först körs: Eval("body").ToString() som returnerar din htmlkod från databasen. (eller var du nu sparar den)
Och sedan körs HttpUtility.HtmlEncode() på den returnerade koden. För serven ser det ut ungefär såhär: t.ex. HttpUtility.HtmlEncode("<div>blabla</div>")

Jo jag vet att den läser funktioner inifrån, en av mina många tankevurpor:( Jag har en otrolig förmåga att göra såna titt som tätt.

Tackar för förklaringen!