[CLOSED] HtmlEditor text is rendered HTML encoded

  1. #1

    [CLOSED] HtmlEditor text is rendered HTML encoded

    Hi,

    I have an HtmlEditor control in a FormPanel. On a full postback, the text is rendered correctly. However, when I save changes in a button DirectEvent, the text is rendered back HTML encoded. I found a related thread at http://forums.ext.net/showthread.php...coding-problem claiming that the problem was fixed. Please refer to the below for a code sample and advise kindly.

    Thanks,

    Vadym

    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <script runat="server">
        protected void ButtonSave_Click(object sender, DirectEventArgs e)
        {
            this.HtmlEditor1.Text = "After editing!";
        }
    
        protected void Page_Load(object sender, EventArgs e)
        {
            this.HtmlEditor1.Text = "Before editing...";
        }
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
        <link rel="stylesheet" type="text/css" href="/resources/css/main.css" />
        <script type="text/javascript">
            var onSuccess = function (form) {
                form.setValues(form.getValues());
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="X"
            IDMode="Explicit" />
        <ext:Viewport runat="server" Layout="BorderLayout" Region="Center">
            <Items>
                <ext:Panel ID="Panel1" runat="server" Width="900" AutoScroll="true" Border="false"
                    Frame="true" Margins="0 -5 -4 -5" Region="Center">
                    <Items>
                        <ext:FormPanel ID="FormPanel1" runat="server" Title="" Width="900" AutoScroll="true"
                            Padding="15" Border="false" Frame="true" TrackResetOnLoad="true">
                            <Items>
                                <ext:CompositeField ID="CompositeField1" runat="server" FieldLabel="Summary">
                                    <Items>
                                        <ext:HtmlEditor ID="HtmlEditor1" runat="server" Width="750" Height="360" AutoScroll="false">
                                            <Listeners>
                                                <Initialize Handler="Ext.DomHelper.applyStyles(this.getEditorBody(), {'background-position' : 'top right', 'margin':'0px', padding:'0px'});" />
                                            </Listeners>
                                        </ext:HtmlEditor>
                                    </Items>
                                </ext:CompositeField>
                            </Items>
                            <Buttons>
                                <ext:Button ID="ButtonSave" runat="server" Text="Save" Icon="Disk">
                                    <DirectEvents>
                                        <Click OnEvent="ButtonSave_Click" Success="onSuccess(#{FormPanel1}.getForm());">
                                            <EventMask ShowMask="true" />
                                            <ExtraParams>
                                                <ext:Parameter Name="values" Value="#{FormPanel1}.getForm().getValues()" Mode="Raw"
                                                    Encode="true" />
                                            </ExtraParams>
                                        </Click>
                                    </DirectEvents>
                                </ext:Button>
                                <ext:Button ID="ButtonReset" runat="server" Text="Reset">
                                    <Listeners>
                                        <Click Handler="#{FormPanel1}.getForm().reset();" />
                                    </Listeners>
                                </ext:Button>
                            </Buttons>
                        </ext:FormPanel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
    Last edited by Daniil; Feb 22, 2012 at 3:05 PM. Reason: [CLOSED]
  2. #2
    Hi,

    I've just caught that thread.

    Please always ask any technical support question on the Premium Help forums. We might miss your question on another forums.

    Regarding to the problem.

    The problem is in the success handler.
    form.setValues(form.getValues());
    The getValues method returns encoded values.

    I can suggest to use the getFieldValues method.
    form.setValues(form.getFieldValues());
  3. #3
    Thanks Daniil!

    I posted this question before becoming premium :)

    Anyway, in addition to your suggestion, I had to add the following line in web.config to avoid the "A potentially dangerous Request.Form value was detected from the client" server error:

    <httpRuntime requestValidationMode="2.0" />
    I'm not convinced if it's the best practice though. It only allows me to save the value of the HTML Editor with that setting.

    Thanks,

    Vadym
  4. #4
    Oh, my fault :)

    Here are the details about the option you have applied in Web.config:
    http://www.asp.net/whitepapers/aspnet4/breaking-changes

    Here is the details about request validation:
    http://www.asp.net/whitepapers/request-validation

    Here is the solution how to don't turn off request validation, but avoid errors with submitting an HtmlEditor value.
    http://forums.ext.net/showthread.php...ll=1#post37675
  5. #5
    Thanks again!

    It turns out that the only change I had to make was to use form.getFieldValues(); I turned back off Request validation mode option in web.config and there was no need to set EscapeValue="false" and SubmitValue="false" for HtmlEditor as suggested in http://forums.ext.net/showthread.php...ll=1#post37675. Also, I didn't have to encode the editor value on the client and decode it on the server and use an extra parameter in the Button click direct event

    Somehow, it all works well? :)

    <%@ Page Language="C#" AutoEventWireup="true" %>
     
    <script runat="server">
        protected void ButtonSave_Click(object sender, DirectEventArgs e)
        {
            string value = this.HtmlEditor1.Text;
            this.HtmlEditor1.Text = value + "\r\n" + "After editing!";
        }
     
        protected void Page_Load(object sender, EventArgs e)
        {
            this.HtmlEditor1.Text = "Before editing...";
        }
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
        <link rel="stylesheet" type="text/css" href="/resources/css/main.css" />
        <script type="text/javascript">
            var onSuccess = function (form) {
                form.setValues(form.getFieldValues());
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="X"
            IDMode="Explicit" />
        <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout" Region="Center">
            <Items>
                <ext:Panel ID="Panel1" runat="server" Width="900" AutoScroll="true" Border="false"
                    Frame="true" Margins="0 -5 -4 -5" Region="Center">
                    <Items>
                        <ext:FormPanel ID="FormPanel1" runat="server" Title="" Width="900" AutoScroll="true"
                            Padding="15" Border="false" Frame="true" TrackResetOnLoad="true">
                            <Items>
                                <ext:CompositeField ID="CompositeField1" runat="server" FieldLabel="Summary">
                                    <Items>
                                        <ext:HtmlEditor ID="HtmlEditor1" runat="server" Width="750" Height="360" AutoScroll="false">
                                            <Listeners>
                                                <Initialize Handler="Ext.DomHelper.applyStyles(this.getEditorBody(), {'background-position' : 'top right', 'margin':'0px', padding:'0px'});" />
                                            </Listeners>
                                        </ext:HtmlEditor>
                                    </Items>
                                </ext:CompositeField>
                            </Items>
                            <Buttons>
                                <ext:Button ID="ButtonSave" runat="server" Text="Save" Icon="Disk">
                                    <DirectEvents>
                                        <Click OnEvent="ButtonSave_Click" Success="onSuccess(#{FormPanel1}.getForm());">
                                            <EventMask ShowMask="true" />
                                        </Click>
                                    </DirectEvents>
                                </ext:Button>
                                <ext:Button ID="ButtonReset" runat="server" Text="Reset">
                                    <Listeners>
                                        <Click Handler="#{FormPanel1}.getForm().reset();" />
                                    </Listeners>
                                </ext:Button>
                            </Buttons>
                        </ext:FormPanel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
  6. #6
    Well, yes, it works.

    I rather mentioned that post so you have it in mind for the future possible problem.
  7. #7
    Quote Originally Posted by Daniil View Post
    Well, yes, it works.

    I rather mentioned that post so you have it in mind for the future possible problem.
    I'll keep an eye on that. Do you foresee any circumstances under which that workaround could stop working in the future?

    Thanks,

    Vadym
  8. #8
    No, I can't see any problem at the moment.
  9. #9
    Thanks Daniil!

    That has resolved my issue.

    Vadym

Similar Threads

  1. [CLOSED] Can HtmlEditor be rendered in SourceEdit mode?
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Feb 09, 2012, 4:05 PM
  2. Replies: 1
    Last Post: Nov 18, 2011, 3:36 PM
  3. [CLOSED] [1.0] ComboBox with HTML encoded data
    By danielg in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: May 20, 2010, 8:55 AM
  4. 0.82 encoded html getting decoded on store
    By [WP]joju in forum 1.x Help
    Replies: 15
    Last Post: Dec 23, 2009, 6:40 AM
  5. HtmlEditor sometimes text is displayed encoded
    By alexp in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Mar 24, 2009, 2:48 PM

Posting Permissions