• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 966
  • Last Modified:

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

    InitialScreenradeditor-AfterServerButtonClick.JPG
0
j1981
Asked:
j1981
  • 6
  • 4
1 Solution
 
binaryevoCommented:
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
 
j1981Author Commented:
Thank you binaryevo... Can you please put little more details ..
0
 
binaryevoCommented:
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
NFR key for Veeam Agent for Linux

Veeam is happy to provide a free NFR license for one year.  It allows for the non‑production use and valid for five workstations and two servers. Veeam Agent for Linux is a simple backup tool for your Linux installations, both on‑premises and in the public cloud.

 
j1981Author Commented:
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
 
binaryevoCommented:
Did you try using teleriks version of the update panel instead?
0
 
j1981Author Commented:
I am sorry. I could not use that as I am new to the telerik stuffs
0
 
j1981Author Commented:
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
 
binaryevoCommented:
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
 
j1981Author Commented:
Sorry. I am giving you full points.
0
 
j1981Author Commented:
binaryevo may be correct even I could not apply his solution in fully.
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now