Link to home
Start Free TrialLog in
Avatar of j1981
j1981Flag for India

asked on

Telerik Radeditor turns to blue screen in safari and Chrome

Hi,

I have an issue with RadEditor control while operating it in Safari and Chrome.

Initially the Editor loads fine. See the attachment  

"radeditor_BeforeServerButtonClick.JPG".
But if I click on some server controls, it turns the radeditor in to a blue

screen. See that attachment "radeditor_AfterServerButtonClick.JPG".

The following is the html part of the radeditor.

Request you to please resolve this issue.
<radE:RadEditor ID="edr_PaymentNoteDtls" Skin="Office2007" ShowHtmlMode="false" ShowPreviewMode="false" CssClass="NormalHeading" SubmitCancelButtons="false"  runat="server" Width="940px" Height="450px" ToolsFile="~/RadControls/Editor/ToolsFile.xml" StripFormattingOnPaste="MSWordNoFonts" NewLineBr="False" ImagesPaths="~/DocumentImages" UploadImagesPaths="~/DocumentImages" DeleteImagesPaths="~/DocumentImages"> </radE:RadEditor>

Open in new window

    User generated imageradeditor-AfterServerButtonClick.JPG
Avatar of binaryevo
binaryevo
Flag of United States of America image

You may have to override the css class with one of your own and use the !Important attribute to ensure that your class has precedence.  I know I have run into similar issues with the rad grid.
Avatar of j1981

ASKER

Thank you binaryevo... Can you please put little more details ..
Here is an example of one i created that works flawlessly.
 <script type="text/javascript">
        function OnClientPasteHtml(sender, args) {
            var commandName = args.get_commandName();
            var value = args.get_value();

            if (commandName == "InsertDate" || commandName == "InsertTime") {
                //Set the inserted date / time string in a DIV with formatting
                var div = document.createElement("DIV");

                Telerik.Web.UI.Editor.Utils.setElementInnerHtml(div, value);

                //Set date/time information in a DIV element with applied color and background formatting 
                args.set_value("<div style='margin: 1px; padding:2px; width:auto; display:inline;border:solid 2px black; color:black; background-color:#FFCC00;'>" + div.innerHTML + "</div>");
            }

            if (commandName == "ImageManager") {
                //See if an img has an alt tag set 
                var div = document.createElement("DIV");

                //Do not use div.innerHTML as in IE this would cause the image's src or the link's href to be converted to absolute path.
                //This is a severe IE quirk.
                Telerik.Web.UI.Editor.Utils.setElementInnerHtml(div, value);

                //Now check if there is alt attribute 
                var img = div.firstChild;
                if (!img.alt) {
                    var alt = prompt("No alt tag specified. Please specify an alt attribute for the image", "");
                    img.setAttribute("alt", alt);

                    //Set new content to be pasted into the editor 
                    args.set_value(div.innerHTML);
                }
            }

            if (commandName == "DocumentManager") {
                //Set target="_blank" to the links inserted through the Document manager
                var div = document.createElement("DIV");

                Telerik.Web.UI.Editor.Utils.setElementInnerHtml(div, value);
                //Now check if there is target attribute
                var link = div.firstChild;
                if (!link.target) {
                    alert("No target attribute specified. The editor will automatically set target='blank' to the link");
                    link.setAttribute("target", "_blank");

                    //Set new content to be pasted into the editor 
                    args.set_value(div.innerHTML);
                }
            }

            if (commandName == "InsertTable") {
                //Set border to the inserted table elements
                var div = document.createElement("DIV");

                //Remove extra spaces from begining and end of the tag
                value = value.trim();

                Telerik.Web.UI.Editor.Utils.setElementInnerHtml(div, value);
                var table = div.firstChild;

                if (!table.style.border) {
                    table.style.border = "dashed 1px red";
                    //Set new content to be pasted into the editor 
                    args.set_value(div.innerHTML);
                }
            }

            //Cancel the event if you want to prevent pasteHtml to execute 
            /*
            args.set_cancel(true);
            */
        }
        
    </script><h1>Template Edit</h1>
      <br />
    
    <table width="80%" align="center">
        <tr>
            <td>Name</td>
            <td>
                <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>Description</td>
            <td>
                <asp:TextBox ID="txtDescription" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <asp:CheckBoxList ID="clTypes" runat="server" RepeatDirection="Horizontal">
                    <asp:ListItem Text="CA"></asp:ListItem>
                    <asp:ListItem Text="Contract"></asp:ListItem>
                    <asp:ListItem Text="Proposal"></asp:ListItem>
                    <asp:ListItem Text="Working Copy"></asp:ListItem>
                </asp:CheckBoxList>
            </td>
        </tr>
    </table>
    <telerik:RadEditor runat="server" ID="rdEditor" Skin="WebBlue" Height="800px" Width="100%" OnClientPasteHtml="OnClientPasteHtml"></telerik:RadEditor>
    <table>
        <tr>
            <td colspan="2" align="right">
                <br /><br />
                <asp:Button ID="btnSave" runat="server" Text="Save" Width="100px" OnClick="btnSave_Click" />&nbsp&nbsp&nbsp
                <asp:Button ID="btnCancel" runat="server" Text="Cancel" Width="100px" OnClick="btnCancel_Click" />
            </td>
        </tr>
    </table>

Open in new window

Avatar of j1981

ASKER

Thank you so much.. Let me test with this.

The issue was when using rad editor inside an update panel. When I put that outside the update panel the issue was resolved.
Did you try using teleriks version of the update panel instead?
Avatar of j1981

ASKER

I am sorry. I could not use that as I am new to the telerik stuffs
Avatar of j1981

ASKER

I've requested that this question be closed as follows:

Accepted answer: 0 points for j1981's comment http:/Q_27343250.html#36942066

for the following reason:

The issue was with the updated pannel. I could not get the real solution for this
ASKER CERTIFIED SOLUTION
Avatar of binaryevo
binaryevo
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of j1981

ASKER

Sorry. I am giving you full points.
Avatar of j1981

ASKER

binaryevo may be correct even I could not apply his solution in fully.