This is a migrated thread and some comments may be shown as answers.

ContentAreaMode='Div' and large content flickers in IE

8 Answers 74 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Andreas
Top achievements
Rank 1
Andreas asked on 06 Mar 2014, 03:16 PM
Hi,

The radeditor flickers a lot when using IE, when setting ContentMode to Div and using AutoResize to fit content height.

See the following sample:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml" style="overflow: auto">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <telerik:RadEditor ID="re2" runat="server" AutoResizeHeight="True" ContentAreaMode="Div">
                <Content>
                    Some text<br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    Delete this row!
                    <br />
                    <br />
                    <br />
                    Some more text
                </Content>
             </telerik:RadEditor>
        </div>
    </form>
</body>
</html>

Scroll down to the bottom and delete the line "Delete this row!", the entire page scrolls to the top of the Editor...

I have located the root of this behavior, it has to do with setFocus. Doing the following hack (commenting out the setFocus line):
<script type="text/javascript">
            Telerik.Web.UI.RadEditor.prototype.executeCommand = function (radCommand, setFocus, addToStack)
            {
                //Set the editor's window
                if (!radCommand.get_window())
                {
                    radCommand.set_window(this.get_contentWindow());
                }
 
                //if (false != setFocus && !this.isOpera) this.setFocus(); //Opera has a problem! Typing is discontinued.
                this._commandsManager.execute(radCommand, addToStack);
            }
        </script>

The Editor works really smooth after this hack, but of course this might have bad side effects...
This fix also makes typing at the bottom of the Editor really smooth an nice!!!

Is this something you can fix with a real solution?

Regards
Andreas

8 Answers, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 11 Mar 2014, 07:14 AM
Hi Andreas,

The described problem is logged for fixing. Unfortunately, due to the complexity of this task I am unable to estimate when is going to be fixed neither provide a possible approach as a workaround. The only possible known resolutions is to change the ContentAreaMode to iframe.

You can follow this feedback portal item for updates on this task.

Regards,
Ianko
Telerik

DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

0
Andreas
Top achievements
Rank 1
answered on 11 Mar 2014, 02:40 PM
Hi,

Well IFrame mode is not an option for us...
We will have to solve this in Div-mode, our end users thinks the editor is pretty much unusable when editing large content because of the flickering!

We have actually tried this for now:
if ($telerik.isIE)
        {
            Telerik.Web.UI.RadEditor.prototype.setFocus = function ()
            {
            }
        }

Haven't found any side effects of this yet, but it doesn't feel like a good solution...
Maybe this will work for us since we only use a small part of the editor tools...
Hoping for a real solution from your side!!!

Regards
Andreas
0
Ianko
Telerik team
answered on 14 Mar 2014, 09:26 AM
Hi Andreas,

Thank you for getting back to me.

The used workaround seem to be working find and I am unable to think of possible cases which could lead to unwanted side effects.

The only one that I can think of is if the ContentAreaMode is set to Iframe, although as you mentioned this mode is never going to be used. Nevertheless, I recommend you using the following workaround, which will prevent the correct behavior of the Iframe mode and use the workaround for the DIV: 
<telerik:RadEditor ID="RadEditor1" runat="server" AutoResizeHeight="True" ContentAreaMode="Div">
</telerik:RadEditor>
 
<script type="text/javascript">
    Telerik.Web.UI.RadEditor.prototype.setFocus = function () {
        try {
            if ($telerik.isIE && this.getSelection().isControl()) return;
 
            var area = this.get_mode() != $T.EditModes.Html ? this.get_contentWindow() : this._getTextArea();
            if (this.get_contentAreaMode() == $T.EditorContentAreaMode.Div) area = this.get_contentArea();
            if (area && area.focus && !this.get_autoResizeHeight()) area.focus();
        }
        catch (e) { }
    };
 
</script>

I also used the provided workaround to update the feedback portal item, so that other users could resolve the same problem. As token of appreciation for sharing knowledge with the community.

On a side note, we would like to hear your feedback about this important change that we plan to apply to the default Enter key behavior (NewLineMode) of RadEditor. As a token of gratitude for your contribution we will reward you with 1000 Telerik points for your vote.


Regards,
Ianko
Telerik
 

DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

 
0
Andreas
Top achievements
Rank 1
answered on 14 Mar 2014, 10:30 AM
Thanks!

Changed to your workaround instead. Working just fine!
Also voted for changing to P-tag.
By the way we changed to P-tag in our solution!

Regards
Andreas
0
Ianko
Telerik team
answered on 14 Mar 2014, 10:57 AM
Hi Andreas,

Thank you for your sharing your feedback with us.

I have already updated your Telerik points as promised.

Regards,
Ianko
Telerik
 

DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

 
0
Andreas
Top achievements
Rank 1
answered on 17 Mar 2014, 10:23 AM
Hi,

Found two small issues with our workaround:
First, there is a javascript error in it since $T is undefined.
Even after fixing this, it will be bad for other browsers (Firefox for example) since with this fix you can't for example press the bold button and then start typing immediately since the editor doesn't have focus..

The following fix seems to work better:
Telerik.Web.UI.RadEditor.prototype.setFocus = function ()
        {
            try
            {
                if ($telerik.isIE && this.getSelection().isControl()) return;
 
                var area = this.get_mode() != Telerik.Web.UI.EditModes.Html ? this.get_contentWindow() : this._getTextArea();
                if (this.get_contentAreaMode() == Telerik.Web.UI.EditorContentAreaMode.Div) area = this.get_contentArea();
                if (area && area.focus && !($telerik.isIE && this.get_autoResizeHeight())) area.focus();
            }
            catch (e) { }
        };

Regards
Andreas
0
Accepted
Ianko
Telerik team
answered on 17 Mar 2014, 12:49 PM
Hi Andreas,

You are correct, this workaround leads to some inconsistent issues.

Could you please try with these modifications:
Telerik.Web.UI.RadEditor.prototype.setFocus = function () {
    var $T = Telerik.Web.UI;
    try {
        if ($telerik.isIE && this.getSelection().isControl()) return;
 
        var area = this.get_mode() != $T.EditModes.Html ? this.get_contentWindow() : this._getTextArea();
        if (this.get_contentAreaMode() == $T.EditorContentAreaMode.Div) area = this.get_contentArea();
        if (area && area.focus && !(this.get_autoResizeHeight() && $telerik.isIE))area.focus();
    }
    catch (e) { }
};


Regards,
Ianko
Telerik
 

DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

 
0
Andreas
Top achievements
Rank 1
answered on 17 Mar 2014, 03:18 PM
Hi,

That code does same as I suggested, so it is working just fine!

Regards,
Andreas
Tags
Editor
Asked by
Andreas
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Andreas
Top achievements
Rank 1
Share this question
or