Ajaxtoolkit and Htmleditorfieldextender. Content Demo

Question

Ajaxtoolkit and Htmleditorfieldextender. Content Demo

Asked 10 years, 5 months ago

Viewed 112 times

1

I’m using the HtmlEditorExtender of Ajaxtoolkit and in it I enabled the option to insert an image to the body of the text.

<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 one <div> 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 return the text in this way:

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

I am using SQL Server and saving the content in a field of type text, and charge to a property of the type string.

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

Example:

Exemplo de renderização

And the source of html when inspecting the elemtno appears like this:

<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 solve this problem?

1 answer

Browser other questions tagged c# asp.net webforms ajaxtoolkit

You are not signed in. Login or sign up in order to post.

by user6026 · Answer 1 · 2014-06-03T14:04:05+00:00

Use in place of this div um Literal, and put the mode="Transform", so that he process 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%' />";
    }
}

Upshot:

inserir a descrição da imagem aqui

<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>

Notice that in the div he did the Encode and in the Literal he sued Html with that configuration of mode="Transform". Just remembering that the Literal also makes the Encode when the mode="Encode".

Obs: if it comes from your bank with the characters (Encode) use before assigning a HttpUtility.HtmlDecode.

Example:

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