What's New?

[CLOSED] Problem with “HtmlEditor” component in IE

  1. #1
    Jan 26, 2012, 4:08 PM

    [CLOSED] Problem with ?HtmlEditor? component in IE

    Hi,we are having a problem with the ?HtmlEditor? component in IE. When the user tries to change the alignment of just one line of the text, the component change the alignment of all the text typed. Our first approach was to override the fixKeys method commenting four lines: 

    
Ext.onReady(function () {
            Ext.form.HtmlEditor.override({
                fixKeys: function () { // load time branching for fastest keydown performance
                    if (Ext.isIE) {
                        return function (e) {
                            var me = this,
                    k = e.getKey(),
                    doc = me.getDoc(),
                    range, target;
                            if (k == e.TAB) {
                                e.stopEvent();
                                range = doc.selection.createRange();
                                if (range) {
                                    range.collapse(true);
                                    range.pasteHTML('    ');
                                    me.deferFocus();
                                }
                            }
                            else if (k == e.ENTER) {
                                range = doc.selection.createRange();
                                if (range) {
                                    target = range.parentElement();
                                    if (!target || target.tagName.toLowerCase() !== 'li') {
//                                        e.stopEvent();
//                                        range.pasteHTML('<br />');
//                                        range.collapse(false);
//                                        range.select();
                                    }
                                }
                            }
                        };
                    }
                } ()                
            });
        });
    Click image for larger version.  Name: htmlEditorNotWorking.png  Views: 87  Size: 6.8 KB  ID: 3771

    Click image for larger version.  Name: htmlEditorHTMLafterChange.png  Views: 89  Size: 7.4 KB  ID: 3769

    Click image for larger version.  Name: htmlEditorHugeSpacing.png  Views: 82  Size: 10.3 KB  ID: 3770

    That solved the problem about the alignment, but now the HTML generated have the tags 
    <p></p>
    in each line, creating a huge spacing between the lines and makes the text looks bad. Do you have any idea about how to solve this?

    Thank you
    Last edited by Daniil; Jan 31, 2012 at 6:11 PM. Reason: [CLOSED]
  2. #2
    Jan 26, 2012, 5:34 PM
    Hi,

    Well, a container is required to align a text.

    A user could replace "<p>" with "<div>". There should not be big gaps.
  3. #3
    Jan 26, 2012, 6:16 PM
    Thanks, but the "<p>" is auto-generated by the component, the user cannot change. I mean, he can if he mannualy change the code generated, but that´s not the idea, the user just need to type a text and this text will be saved in the data base in HTML format. The component must show a correct format during the typing. Do you have any idea? How can I change the component behaviour?


    Quote Originally Posted by Daniil View Post
    Hi,

    Well, a container is required to align a text.

    A user could replace "<p>" with "<div>". There should not be big gaps.
  4. #4
    Jan 26, 2012, 9:00 PM
    Well, I'm not sure we can override/avoid it, because it happens on a browser level.

    Maybe something like this:

    Example
    <%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!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 runat="server">
    <title>Ext.NET Example</title>

    <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
    <script type="text/javascript">
        Ext.form.HtmlEditor.override({
            fixKeys : function () { // load time branching for fastest keydown performance
                if (Ext.isIE) {
                    return function (e) {
                        var me = this,
                            k = e.getKey(),
                            doc = me.getDoc(),
                            range, target;
                        if (k == e.TAB) {
                            e.stopEvent();
                            range = doc.selection.createRange();
                            if (range) {
                                range.collapse(true);
                                range.pasteHTML('&nbsp;&nbsp;&nbsp;&nbsp;');
                                me.deferFocus();
                            }
                        }
                        else if (k == e.ENTER) {
                            r = doc.selection.createRange();
                            if (r) {
                                var target = r.parentElement();
                                if(!target || target.tagName.toLowerCase() != 'li'){
                                    e.stopEvent();
                                    r.pasteHTML('<div>&nbsp;</div>'); // changed
                                    r.collapse(false);
                                    r.select();
                                }
                            }
                        }
                    };
                }
            } ()               
        });
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:HtmlEditor runat="server" />
    </form>
</body>
</html>

Similar Threads

  1. [CLOSED] Component focus problem in the rowExpander
    By albayrak in forum 1.x Legacy Premium Help
    Replies: 19
    Last Post: Jan 18, 2012, 7:42 AM
  2. Problem with the header of the MessageBox component when it has a large title
    By rsaldanhabr in forum 1.x Help
    Replies: 2
    Last Post: Jun 27, 2011, 10:37 AM
  3. Problem with the header of the MessageBox component when it has a large title
    By rsaldanhabr in forum 1.x Help
    Replies: 1
    Last Post: May 21, 2011, 1:20 PM
  4. [CLOSED] [1.0] Problem with Multifield.Fields.Remove component
    By PoloTheMonk in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 22, 2010, 6:42 PM
  5. [CLOSED] [component].Disabled = false is not the same as [component].Enabled = true
    By mblume in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 22, 2009, 7:38 AM

Tags for this Thread

Posting Permissions