Solved

Telerik Radeditor turns to blue screen in safari and Chrome

Posted on 2011-09-27
10
949 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

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
 

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
Today I had a very interesting conundrum that had to get solved quickly. Needless to say, it wasn't resolved quickly because when we needed it we were very rushed, but as soon as the conference call was over and I took a step back I saw the correct …
In a recent question (https://www.experts-exchange.com/questions/28997919/Pagination-in-Adobe-Acrobat.html) here at Experts Exchange, a member asked how to add page numbers to a PDF file using Adobe Acrobat XI Pro. This short video Micro Tutorial sh…
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…

777 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