AjaxToolkit and HtmlEditorFieldExtender. Content Demo

Question

AjaxToolkit and HtmlEditorFieldExtender. Content Demo

Navigation

#1 by (1 votes)

1

<asp:TextBox ID="txtDescricao" runat="server" TextMode="MultiLine" Rows="5" 
    Width="100%" Height="100%"></asp:TextBox>

<asp:RequiredFieldValidator SetFocusOnError="True" runat="server"  
ControlToValidate="txtDescricao" ValidationGroup="SalvarNoticia">
</asp:RequiredFieldValidator>

<ajaxtoolkit:HtmlEditorExtender runat="server" ID="heeDescricao"
    TargetControlID="txtDescricao" DisplaySourceTab="true" EnableSanitization="false" 
    OnImageUploadComplete="heeDescricao_ImageUploadComplete">
    <Toolbar>
        ...
        <ajaxtoolkit:InsertImage />
        ...
    </Toolbar>
</ajaxtoolkit:HtmlEditorExtender>

On another page I separated a HtmlEditorExtender to demonstrate the content of the text. So I did like this:

<asp:Panel ID="pnlDescricao" SkinID="PanelMain" runat="server" Height="70px">
    <div id="txtDescricao" runat="server">
    </div>
</asp:Panel>

And in the Code-Behind of this demo page I return the text this way:

var obj = new Business.Texto().Obter(id);
if (obj != null)
{
    ...
    txtDescricao.InnerHtml = obj.Descricao;
    ...
}

I'm using SQL Server and saved the content in a field of type text , and I load it to a property of type <div> .

The screen renders the html code, not the image itself:

Example:

Andthehtmlsourcewheninspectingtheitemappearslikethis:

<div id="CPHConsultaBody_pnlDescricao" 
    class="ui-widget ui-widget-content ui-corner-all" 
    style="height:70px;padding:2px;margin-top:2px;padding:5px;">
    <div id="CPHConsultaBody_txtDescricao">
        &lt;imgsrc="/Arquivos/temp/20140603091536649/wall-smiley.jpg"&gt;</div>        
</div>

How can I resolve this problem?

c# asp.net webforms ajaxtoolkit

asked by anonymous 03.06.2014 / 14:27

1 answer

Problem uploading Laravel / Intervention image Doubt about insert in bank with foreign key using linq

score 1 · Accepted Answer

Use instead of this one div Literal , and place the mode="Transform" ", so that it processes a Html or XHtml .

Example:

ASPX:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="txtDescricao" runat="server"></div> 
        <asp:Literal runat="server" ViewStateMode="Enabled" ID="LiteralDescricao" ClientIDMode="Static" Mode="Transform"></asp:Literal>   
    </div>
    </form>
</body>
</html>

Code:

public partial class WebForm1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        txtDescricao.InnerText = "<img src='Content/1.png' border='0' width='50%' />";
        LiteralDescricao.Text = "<img src='Content/1.png' border='0' width='50%' />";
    }
}

Result:

<div>
     <div id="txtDescricao">&lt;img src=&#39;Content/1.png&#39; border=&#39;0&#39; width=&#39;25%&#39; /&gt;</div> 
     <img src='Content/1.png' border='0' width='25%' />   
</div>

Note that in the div it made Encode and Literal it rendered Html with that mode="Transform" setting. Just remember that Literal also does Encode when mode="Encode" .

Obs: If you come from your database with the characters (Encode), use a HttpUtility.HtmlDecode .

Example:

LiteralDescricao.Text = HttpUtility.HtmlDecode(obj.Descricao);