locked
Ajax HtmlEditorExtender not rendering content RRS feed

  • Question

  • User-359936451 posted

    Trying to load an html file into the AJAX HtmlEditorExtender textbox in the onload event. I also tried the Pre-Load event.

    I haven't worked with AJAX in awhile so I am pretty sure I am missing something simple.

            Dim myHtml As String
            Dim fileName As String = "myHTMLFile.htm"
            Dim fullFileName As String = Request.MapPath(Convert.ToString("~/Template/") & fileName)
            Dim streamReader As New StreamReader(New FileStream(fullFileName, FileMode.Open, FileAccess.Read))
            newHtml = streamReader.ReadToEnd()
            streamReader.Close()

            TextBox1.Text = newHtml


    Break point shows the file content, its just not rendering.
    Could someone clue me in on what I am sure is simple mistake or oversight?

    thanks,

    Thursday, July 13, 2017 3:05 PM

Answers

  • User-271186128 posted

    Hi march11,

    It seems that if we put the whole html into the TextBox, the HtmlEditorExtender will not work. However, if we get the target div or span tag and then put it into the TextBox, the HtmlEditorExtender will render the content well.

    Please refer to the following sample code:
    aspx.vb:

    Imports System.IO
    Imports HtmlAgilityPack
    
    Public Class HTMLEditorExtender_demo
        Inherits System.Web.UI.Page
    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
            If Not IsPostBack Then
                Dim newHtml As String = Nothing
                Dim fileName As String = "myHTMLFile.htm"
                Dim fullFileName As String = Request.MapPath(Convert.ToString("~/Template/") & fileName)
                Dim streamReader As New StreamReader(New FileStream(fullFileName, FileMode.Open, FileAccess.Read))
                newHtml = streamReader.ReadToEnd()
                streamReader.Close()
    
                Dim doc As New HtmlDocument()'here I get the htmldocument with HtmlAgilityPack. You could install the HtmlAgilityPack from Nuget.
                doc.LoadHtml(newHtml)
                Dim whatUrLookingFor = doc.GetElementbyId("myspan").OuterHtml 'here we’ll get the target span to be rendered
                txtEditor.Text = whatUrLookingFor
            End If
    
        End Sub
    
        Protected Sub Submit_Click(sender As Object, e As EventArgs) Handles Submit.Click
            Dim aa = HttpUtility.HtmlDecode(txtEditor.Text)
            lblContents.Text = txtEditor.Text
        End Sub
    End Class
    

    aspx:

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="HTMLEditorExtender_demo.aspx.vb" Inherits="WebForm_AjaxToolKit_VB.HTMLEditorExtender_demo" %>
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ToolkitScriptManager ID="toolScriptManageer1" runat="server"></asp:ToolkitScriptManager>
                <asp:TextBox ID="txtEditor" Width="300" Height="200" runat="server"></asp:TextBox> <br />
    
                <asp:HtmlEditorExtender ID="HtmlEditorExtender1" TargetControlID="txtEditor" runat="server"></asp:HtmlEditorExtender>
    
                <asp:Button ID="Submit" runat="server" Text="Submit" OnClick="Submit_Click" /><br />
                <asp:Label ID="lblContents" runat="server" />
            </div>
        </form>
    </body>
    </html>
    

    myHTMLFile.htm:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <span id="myspan" style="background-color: #cc0000;">Test Text</span>
    </body>
    </html>       
    

    Finally, we’ll get “Test Text” rendered successfully.

    If you have any other questions, please feel free to contact me any time.

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, July 14, 2017 8:02 AM

All replies

  • User-271186128 posted

    Hi march11,

    It seems that if we put the whole html into the TextBox, the HtmlEditorExtender will not work. However, if we get the target div or span tag and then put it into the TextBox, the HtmlEditorExtender will render the content well.

    Please refer to the following sample code:
    aspx.vb:

    Imports System.IO
    Imports HtmlAgilityPack
    
    Public Class HTMLEditorExtender_demo
        Inherits System.Web.UI.Page
    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
            If Not IsPostBack Then
                Dim newHtml As String = Nothing
                Dim fileName As String = "myHTMLFile.htm"
                Dim fullFileName As String = Request.MapPath(Convert.ToString("~/Template/") & fileName)
                Dim streamReader As New StreamReader(New FileStream(fullFileName, FileMode.Open, FileAccess.Read))
                newHtml = streamReader.ReadToEnd()
                streamReader.Close()
    
                Dim doc As New HtmlDocument()'here I get the htmldocument with HtmlAgilityPack. You could install the HtmlAgilityPack from Nuget.
                doc.LoadHtml(newHtml)
                Dim whatUrLookingFor = doc.GetElementbyId("myspan").OuterHtml 'here we’ll get the target span to be rendered
                txtEditor.Text = whatUrLookingFor
            End If
    
        End Sub
    
        Protected Sub Submit_Click(sender As Object, e As EventArgs) Handles Submit.Click
            Dim aa = HttpUtility.HtmlDecode(txtEditor.Text)
            lblContents.Text = txtEditor.Text
        End Sub
    End Class
    

    aspx:

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="HTMLEditorExtender_demo.aspx.vb" Inherits="WebForm_AjaxToolKit_VB.HTMLEditorExtender_demo" %>
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ToolkitScriptManager ID="toolScriptManageer1" runat="server"></asp:ToolkitScriptManager>
                <asp:TextBox ID="txtEditor" Width="300" Height="200" runat="server"></asp:TextBox> <br />
    
                <asp:HtmlEditorExtender ID="HtmlEditorExtender1" TargetControlID="txtEditor" runat="server"></asp:HtmlEditorExtender>
    
                <asp:Button ID="Submit" runat="server" Text="Submit" OnClick="Submit_Click" /><br />
                <asp:Label ID="lblContents" runat="server" />
            </div>
        </form>
    </body>
    </html>
    

    myHTMLFile.htm:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <span id="myspan" style="background-color: #cc0000;">Test Text</span>
    </body>
    </html>       
    

    Finally, we’ll get “Test Text” rendered successfully.

    If you have any other questions, please feel free to contact me any time.

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, July 14, 2017 8:02 AM
  • User-359936451 posted

    Hi Zhi Lv,

    Thank you for the detailed code, I have it working with some issues. I already the Agility Pack in my project so that was easy too.

    It appears I can not preserve my header <h2> tags in the process. Along with all content in the <head> tag.

    Is scripting not supported via the agility pack?

    I think I can work with this but it will change the default content of my html file and that will take some adapting.

    I noticed that you added logic to redisplay in a label, I would like to save the content back to the html document as it will be used in the body of an email.

    <body>
        <span id="myspan" style="background-color: #cc0000;">
            <h2 class="style9a9">A Message from the Web Portal</h2>   ' COMMENT: Not allowed in SPAN tag.
    
            <p>
                <span class="style3"><span class="style6">Hello <%UserName%>, </span></span>
                <br /><br />
                <span class="style1">
                    You are receiving this email because you have previously 

    thank you again.

    Friday, July 14, 2017 1:33 PM
  • User-271186128 posted

    Hi march11,

    march11

    It appears I can not preserve my header <h2> tags in the process.

    What I mean was not that we can only add all content into a span tag, it could also be a div tag and other tags.

    On the other hand,  after several tests, I found that the extender cannot render an h1 tag. Even if we add the h1 tag (<h1>123</h1>) into the div whose id is “HtmlEditorExtender1_ExtenderContentEditable” (actually the Extender put all edit text into this div) manually in browser side, the h1 tag would be encoded after we submit to the server, which is “&lt;h1&gt;123&lt;/h1&gt;. So the edit content would be “<h1>123</h1>”, not rendered “123”.

    march11

    I would like to save the content back to the html document as it will be used in the body of an email.

    As I said above, I think the styles which the extender could support is already listed in its toolbar, which contains Bold, Italic, Underline, ordered list, unordered list, back color, fore color and so on. So if you read the content which the extender could support from your html, they will be rendered successfully. And you could get and save the rendered content after you submit to the server from the TextBox.Text property.

    If you have any other questions, please feel free to contact me any time.

    Best regards,
    Dillion

    Tuesday, July 18, 2017 6:17 AM