[CLOSED] HtmlEditor currentRange in IE11

Page 1 of 3 123 LastLast
  1. #1

    [CLOSED] HtmlEditor currentRange in IE11

    In the new version, and I met this problem?
    http://forums.ext.net/showthread.php...r+currentRange

    It will remind currentRange undefined When clicked the field.
     
    onEditorEvent: function () {
            if (Ext.isIE && !Ext.isIE11) {
                this.currentRange = this.getDoc().selection.createRange();
            }
            this.updateToolbar();
        },
    I do not know the location of 'override' right:
    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.HtmlEditor1.Text = "<b>Some Initial HTML. You can edit it and submit to server.</b>";
            }
        }
    
        protected void Submit(object sender, DirectEventArgs e)
        {
            X.Msg.Alert("Submit", "The following has been submitted:<br/><br/>" + this.HtmlEditor1.Text).Show();
        }
    </script>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>HtmlEditor - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        <script type="text/javascript">
    
            Ext.form.field.HtmlEditor.override({
                insertAtCursor: function (text) {
                    var doc, r, nnode;
    
                    if (!this.activated) {
                        return;
                    }
    
                    this.win.focus();
                    if (Ext.isIE && !Ext.isIE11) {
                        doc = this.getDoc();
                        r = this.currentRange || doc.selection.createRange();
    
                        if (r) {
                            r.pasteHTML(text);
                            this.syncValue();
                            this.deferFocus();
                        }
                    } else if (Ext.isIE11) {
                        doc = this.getDoc();
                        r = doc.getSelection().getRangeAt(0);
    
                        nnode = doc.createElement("span"); // Is there any way to avoid that? I cannot find...
                        r.surroundContents(nnode);
                        nnode.innerHTML = text;
                    } else {
                        this.execCmd("InsertHTML", text);
                        this.deferFocus();
                    }
                }
            });
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <h1>HtmlEditor</h1>
    
            <p>Provides a lightweight HTML Editor component.</p>
                
            <p>For more details, we would strongly recommend to read <a href="http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.HtmlEditor">the HtmlEditor ExtJS docs article</a> and <a href="http://forums.ext.net/showthread.php?20425&p=88270&viewfull=1#post88270">this Ext.NET forums thread</a> about possible problems with HtmlEditor.</p>
    
            <br/>
    
            <ext:HtmlEditor 
                ID="HtmlEditor1" 
                runat="server" 
                Width="600"
                EnableAlignments="false"
                EnableFontSize="false"
                CreateLinkText="My CreateLinkText">
                <ButtonTips>
                    <BackColor Text="My BackColor Tip" />
                    <Bold Text="My Bold Tip" />
                </ButtonTips>
            </ext:HtmlEditor>
    
            <ext:Button runat="server" Text="Submit" OnDirectClick="Submit" />
        </form>
    </body>
    </html>
    Attached Thumbnails Click image for larger version. 

Name:	pic01051.JPG 
Views:	20 
Size:	71.7 KB 
ID:	18191  
    Last edited by Daniil; Jan 15, 2015 at 12:16 PM. Reason: [CLOSED]
  2. #2
    For now i suggest the following:
    Ext.form.field.HtmlEditor.override({
        onEditorEvent: function () {
            if (Ext.isIE && !Ext.isIE11) {
                var doc = this.getDoc();
                if (doc.selection != null) {
                    this.currentRange = doc.selection.createRange();
                }
            }
            this.updateToolbar();
        }
    });
    Last edited by RaphaelSaldanha; Jan 05, 2015 at 2:43 AM.
  3. #3
    It works fine.
    Thank you very much.
    pls close.
  4. #4
    You're welcome.

    It seems to be a bug, so let's wait for Daniil's position regarding this issue.
    Last edited by RaphaelSaldanha; Jan 05, 2015 at 7:57 AM.
  5. #5
    Hi everybody,

    Yes, I have already removed the old fix. The initial problem has been fixed in ExtJS 5 and everything should be OK now.

    Once I commit ExtJS 5.1.0 to SVN, I will post a follow-up here.
  6. #6
    Thank you Daniil. Please keep us posted.
  7. #7
    By the way,
    How to judge whether there is a htmlEditor control on a page in js ?
    thanks.
  8. #8
    You can try one of the following approaches:

    #1
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <script type="text/javascript">
            var hasHtmlEditor = function () {
                for (var cmpID in Ext.ComponentManager.all) {
                    var cmp = Ext.ComponentManager.all[cmpID];
                    if (cmp.xtype == "htmleditor") {
                        alert("HtmlEditor found");
                        break;
                    }
                }
            }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Button Text="Click Me" runat="server">
                <Listeners>
                    <Click Handler="hasHtmlEditor()" />
                </Listeners>
            </ext:Button>
            <ext:HtmlEditor ID="_hed" runat="server" />
        </form>
    </body>
    </html>
    #2
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <script type="text/javascript">
            var htmlEditorFound = false;
    
            Ext.override(Ext.ComponentManager, {
                register: function (item) {
                    this.callParent(arguments);
                    if (item.xtype == "htmleditor") {
                        htmlEditorFound = true;
                    }
                },
            });
    
            var hasHtmlEditor = function () {
                if (htmlEditorFound) {
                    alert("HtmlEditor found");
                }
                else {
    
                    alert("HtmlEditor not found");
                }
            }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Button Text="Click Me" runat="server">
                <Listeners>
                    <Click Handler="hasHtmlEditor()" />
                </Listeners>
            </ext:Button>
            <ext:HtmlEditor ID="_hed" runat="server" />
        </form>
    </body>
    </html>
  9. #9
    Thank you very much!
    You are a good brother.
  10. #10
    You're welcome.

    Let us know if you need further assistance.
Page 1 of 3 123 LastLast

Similar Threads

  1. [CLOSED] IE11 tooltips
    By bogc in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 22, 2014, 1:14 PM
  2. [CLOSED] Scroll cannot drag down in IE11
    By CPA1158139 in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Sep 19, 2014, 2:28 AM
  3. [CLOSED] [#477] HtmlEditor icw IE11
    By prost in forum 2.x Legacy Premium Help
    Replies: 7
    Last Post: May 05, 2014, 5:27 AM
  4. [CLOSED] IE11 support with Ext JS 3.4.2
    By anup in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Jan 30, 2014, 3:02 PM
  5. [CLOSED] IE11 and Chrome
    By ATLAS in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Nov 13, 2013, 12:25 PM

Posting Permissions