The official release of Ext.NET Mobile is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read More

[CLOSED] HTML editor in IE has box show in editing area

  1. #1

    [CLOSED] HTML editor in IE has box show in editing area

    There is a bug in the HTML editor in IE 9 and IE 10. In your example, you get this odd looking box that you can resize when you click on the editor control. This editor works fine in Chrome and Firefox. Is there a workaround for this?

    Click image for larger version. 

Name:	htmleditor.png 
Views:	54 
Size:	74.3 KB 
ID:	6725
    Last edited by Daniil; Aug 13, 2013 at 4:49 AM. Reason: [CLOSED]
  2. #2
    Hello!

    Thank you for the report! We are investigating.
  3. #3
    Hi everybody,

    The problem appears to be in UseHtml="true" setting. This setting means that the Editor takes a bound element's HTML (in our case - it's a Panel's body), not just its text content. IE interprets that HTML in such a quirky way. Here is a test case to reproduce.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script>
            Ext.Editor.override({
                startEdit: function (el, value) {
                    if (!Ext.isDefined(value)) {
                        this.completeEdit();
                        this.boundEl = Ext.get(el);
    
                        if (this.useHtml) {
                            value = this.boundEl.dom.innerHTML; // the problem is here
                            if (this.htmlEncode) {
                                value = Ext.util.Format.htmlEncode(value);
                            }
                        }
                        else {
                            value = Ext.String.trim(this.boundEl.dom[Ext.isGecko ? "textContent" : "innerText"]);
                        }
                    }
    
                    this.callParent([el, value]);
    
                    if (this.editing && Ext.isIE) {
                        this.field.surpressBlur = true;
                        Ext.defer(function () {
                            this.field.surpressBlur = false;
                            this.field.focus();
                        }, 250, this);
                    }
                }
            });
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:Panel
                ID="Panel1"
                runat="server"
                Width="610"
                Height="300"
                Html="Content"
                BodyPadding="6"
                Title="Editor panel">
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:Button
                                ID="Button1"
                                runat="server"
                                Text="Edit"
                                Icon="Pencil">
                                <Listeners>
                                    <Click Handler="this.setDisabled(true);#{Button2}.setDisabled(false);#{PanelEditor}.startEdit(#{Panel1}.getBody());" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button
                                ID="Button2"
                                runat="server"
                                Text="Save"
                                Icon="Disk"
                                Disabled="true">
                                <Listeners>
                                    <Click Handler="this.setDisabled(true);#{Button1}.setDisabled(false);#{PanelEditor}.completeEdit();" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
            </ext:Panel>
            <ext:Editor
                ID="PanelEditor"
                runat="server"
                HtmlEncode="true"
                UseHtml="true"
                AutoSize="true"
                Alignment="tl-tl?"
                AllowBlur="false"
                Shadow="False">
                <AutoSizeConfig Width="BoundEl" Height="BoundEl" />
                <Field>
                    <ext:HtmlEditor ID="HtmlEditor1" runat="server" />
                </Field>
                <Listeners>
                    <StartEdit Handler="this.field.iframeEl.setHeight(this.field.getHeight() - this.field.getToolbar().getHeight() - 4); this.field.textareaEl.setHeight(this.field.getHeight() - this.field.getToolbar().getHeight() - 4);" Delay="10" />
                </Listeners>
            </ext:Editor>
        </form>
    </body>
    </html>
    As a solution I can suggest to replace:
    #{PanelEditor}.startEdit(#{Panel1}.getBody());
    with
    #{PanelEditor}.startEdit(#{Panel1}.getBody().down('div'));
    Does it work well for you?
    Last edited by Daniil; Aug 08, 2013 at 6:23 AM.

Similar Threads

  1. Replies: 4
    Last Post: Jun 10, 2013, 6:54 AM
  2. Replies: 9
    Last Post: Oct 08, 2012, 8:49 AM
  3. [CLOSED] Cell editing with complex editor
    By Leonid_Veriga in forum 2.x Premium Help
    Replies: 3
    Last Post: Sep 21, 2012, 6:21 PM
  4. Replies: 1
    Last Post: May 28, 2010, 2:13 PM
  5. Replies: 1
    Last Post: Feb 25, 2010, 12:17 PM

Tags for this Thread

Posting Permissions