Solved

Telerik Radeditor turns to blue screen in safari and Chrome

Posted on 2011-09-27
10
943 Views
Last Modified: 2012-05-12
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

    InitialScreenradeditor-AfterServerButtonClick.JPG
0
Comment
Question by:j1981
  • 6
  • 4
10 Comments
 
LVL 14

Expert Comment

by:binaryevo
ID: 36717131
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.
0
 

Author Comment

by:j1981
ID: 36812976
Thank you binaryevo... Can you please put little more details ..
0
 
LVL 14

Expert Comment

by:binaryevo
ID: 36907245
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

0
 

Author Comment

by:j1981
ID: 36942066
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.
0
 
LVL 14

Expert Comment

by:binaryevo
ID: 36949093
Did you try using teleriks version of the update panel instead?
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:j1981
ID: 37055975
I am sorry. I could not use that as I am new to the telerik stuffs
0
 

Author Comment

by:j1981
ID: 37082289
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
0
 
LVL 14

Accepted Solution

by:
binaryevo earned 500 total points
ID: 37082290
Im sorry but, I do not agree that this should be not awarded any points.  My last comment was to use telerik's own ajaxupdatepanels which would resolve the issue as telerik controls like to utilize their own control extensions.  
0
 

Author Closing Comment

by:j1981
ID: 37099877
Sorry. I am giving you full points.
0
 

Author Comment

by:j1981
ID: 37099888
binaryevo may be correct even I could not apply his solution in fully.
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This video discusses moving either the default database or any database to a new volume.
This video explains how to create simple products associated to Magento configurable product and offers fast way of their generation with Store Manager for Magento tool.

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now