Paste with several RadEditor on the same web page

8 posts, 0 answers
  1. Steeve
    Steeve avatar
    17 posts
    Member since:
    Mar 2011

    Posted 24 Dec 2013 Link to this post

    Hi,

    I want to use several RadEditor on my web page.  I started using the solution 1 of this page:
    http://www.telerik.com/support/kb/aspnet-ajax/editor/setting-hidden-radeditor-in-edit-mode-on-click-and-putting-it-in-non-editable-mode-onblur.aspx

    It works fine if I set one Radeditor on the page, but if I add another RadEditor on the page, it does not work.

    The reproduce the problem, I paste text in the first RadEditor (works fine), but if I paste the same text on the second control (without reloading the page), I meet a "Stack overflow". I'm using IE9.

    My telerik version :
    Telerik.Web.Design, 2013.1.220.40
    Telerik.Web.UI, 2013.1.220.40
    Telerik.Web.UI.Skins, 2013.1.220.40

    I attach a picture of the result and a sample of my web page (see below).

    Can you tell me what I am doing wrong??

    Thank you

    Steeve

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="_Test2.aspx.cs" Inherits="Web._Test2" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head id="Head1" runat="server">
        <title>Untitled Page</title>
        <meta http-equiv="X-UA-Compatible" content="IE=8"/>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
     
            <div id="lContent" style="background-color: lightblue;">First RadEditor</div>  
         
            <div style="display:none" id="tContent">  
                <telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoadMandate">  
                        <Content></Content>  
                </telerik:RadEditor
            </div>
         
            <br/><br/><br/>
         
            <div id="div1" style="background-color: lightgray;">Second RadEditor</div>  
         
            <div style="display:none" id="div2">  
                <telerik:RadEditor runat="server" ID="RadEditor2" OnClientLoad="OnClientLoadProjectDesc">  
                        <Content>RadEditor 2</Content>  
                </telerik:RadEditor
            </div>
            <telerik:RadCodeBlock ID="radCodeBlock" runat="server">
     
                <script type="text/javascript">
                    var lContent, tContent;
                    lContent = $get('lContent');
                    tContent = $get('tContent');
                    $addHandler(lContent, "click", lContent_Click);
     
     
                    var div1, div2;
                    div1 = $get('div1');
                    div2 = $get('div2');
                    $addHandler(div1, "click", div1_Click);
             
                    function OnClientLoadMandate(editor, args) {
                        var topZone = $get(editor.get_id() + "Top");
                        topZone.setAttribute("unselectable", "on");
                        topZone.setAttribute("MozUserSelect", "none");
     
                        var buttons = topZone.getElementsByTagName("*");
                        for (var i = 0; i < buttons.length; i++) {
                            var a = buttons[i];
                            a.setAttribute("unselectable", "on");
                            a.style.MozUserSelect = "none";
                            a.style.MozUserFocus = "none";
                            a.style.MozUserFocus = "ignore";
                        }
                     
                        var element = document.all ? editor.get_document().body : editor.get_document();
                        $telerik.addExternalHandler(element, "blur", function(e)  
                        {  
                            var labelUpdated;  
                            var editorContent = editor.get_html(true);  
                            if (lContent.textContent == editorContent)  
                                labelUpdated = false;  
                            else  
                                labelUpdated = true;  
                 
                            lContent.innerHTML = editorContent;  
                            tContent.style.display = 'none';  
                            lContent.style.display = '';  
         
                            if (labelUpdated)   
                            {  
                                //alert('Updating... ' + editorContent);  
                            }  
                        });  
                    }  
         
                    function lContent_Click()  
                    {  
                        lContent.style.display = 'none';  
                        tContent.style.display = '';  
           
                         var editor = $find("<%=RadEditor1.ClientID%>"); //get a reference to RadEditor client object  
                         editor.setFocus(); //set the focus on the the editor  
                         editor.set_html(lContent.innerHTML);
                     }
     
     
                     function OnClientLoadProjectDesc(editor, args) {
                         var topZone = $get(editor.get_id() + "Top");
                         topZone.setAttribute("unselectable", "on");
                         topZone.setAttribute("MozUserSelect", "none");
     
                         var buttons = topZone.getElementsByTagName("*");
                         for (var i = 0; i < buttons.length; i++) {
                             var a = buttons[i];
                             a.setAttribute("unselectable", "on");
                             a.style.MozUserSelect = "none";
                             a.style.MozUserFocus = "none";
                             a.style.MozUserFocus = "ignore";
                         }
     
                         var element = document.all ? editor.get_document().body : editor.get_document();
                         $telerik.addExternalHandler(element, "blur", function (e) {
                             var labelUpdated;
                             var editorContent = editor.get_html(true);
                             if (div1.textContent == editorContent)
                                 labelUpdated = false;
                             else
                                 labelUpdated = true;
     
                             div1.innerHTML = editorContent;
                             div2.style.display = 'none';
                             div1.style.display = '';
     
                             if (labelUpdated) {
                                 //alert('Updating... ' + editorContent);
                             }
                         });
                     }
          
     
                     function div1_Click() {
                         div1.style.display = 'none';
                         div2.style.display = '';
     
                         var editor = $find("<%=RadEditor2.ClientID%>"); //get a reference to RadEditor client object  
                         editor.setFocus(); //set the focus on the the editor  
                         editor.set_html(div1.innerHTML);
                     }
                </script>
     
            </telerik:RadCodeBlock>
     
        </form>
    </body>
    </html>

     

     

     

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 26 Dec 2013 Link to this post

    Hello Steeve,

    We are aware of such issue with an older version of RadControls. Could you please try to upgrade RadControls to the latest official version - 2013.3.1114 and the tell us whether this fixes the issue? More information on how to upgrade your version of RadControls is available in this blog post.

    Regards,
    Danail Vasilev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Steeve
    Steeve avatar
    17 posts
    Member since:
    Mar 2011

    Posted 03 Jan 2014 Link to this post

    Hi,

    I tried with the version 2013.3.1217.40 and it seems to work. I did not encounter the stack overflow error.

    But, I have another problem.  When I click on the div to show the editor, I am not able to set the height correctly.  The first editor go over the second.  The extra seems to have the same height than my toobar.  I let you screenshots and my code to try to explain this.

    I did another test... In the OnClientLoad function, if I set the size of the editor (editor.setSize(856, 90)) and I remove the width-height property.  The height is set to the toolbar.  See my third screenshot.

    Thank you for your help and have a nice day

    Steeve

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="_Test2.aspx.cs" Inherits="Web._Test2" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head id="Head1" runat="server">
        <title>Untitled Page</title>
        <meta http-equiv="X-UA-Compatible" content="IE=8"/>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
             
            <br/><br/><br/>
            <div id="lContent" style="background-color: lightblue;">First RadEditor</div>  
         
            <div style="display:none" id="tContent">  
                <telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoadMandate" ToolbarMode="Default" EditModes="Design" Width="856" Height="90" >  
                    <Tools>
                        <telerik:EditorToolGroup>
                            <telerik:EditorTool Name="AjaxSpellCheck" Enabled="true" ShowIcon="true" />
                            <telerik:EditorTool Name="Cut" />
                            <telerik:EditorTool Name="Copy" />
                            <telerik:EditorTool Name="Paste" />
                            <telerik:EditorTool Name="Italic" />
                            <telerik:EditorTool Name="InsertSymbol" />
                            <telerik:EditorTool Name="Subscript" />
                            <telerik:EditorTool Name="Superscript" />
                            <telerik:EditorTool Name="Undo" />
                            <telerik:EditorTool Name="Redo" />
                        </telerik:EditorToolGroup>
                    </Tools>
                    <CssFiles>
                        <telerik:EditorCssFile Value="~/Styles/RadEditor.css" />
                    </CssFiles>
                </telerik:RadEditor
            </div>
         
            <br/>
         
            <div id="div1" style="background-color: lightgray;">Second RadEditor</div>  
         
            <div style="display:none" id="div2">  
                <telerik:RadEditor runat="server" ID="RadEditor2" OnClientLoad="OnClientLoadProjectDesc">  
                        <Content>RadEditor 2</Content>  
                </telerik:RadEditor
            </div>
            <telerik:RadCodeBlock ID="radCodeBlock" runat="server">
     
                <script type="text/javascript">
                    var lContent, tContent;
                    lContent = $get('lContent');
                    tContent = $get('tContent');
                    $addHandler(lContent, "click", lContent_Click);
     
     
                    var div1, div2;
                    div1 = $get('div1');
                    div2 = $get('div2');
                    $addHandler(div1, "click", div1_Click);
             
                    function OnClientLoadMandate(editor, args) {
                        var topZone = $get(editor.get_id() + "Top");
                        topZone.setAttribute("unselectable", "on");
                        topZone.setAttribute("MozUserSelect", "none");
     
                        var buttons = topZone.getElementsByTagName("*");
                        for (var i = 0; i < buttons.length; i++) {
                            var a = buttons[i];
                            a.setAttribute("unselectable", "on");
                            a.style.MozUserSelect = "none";
                            a.style.MozUserFocus = "none";
                            a.style.MozUserFocus = "ignore";
                        }
     
                        //editor.setSize(856, 90);
                         
                        var element = document.all ? editor.get_document().body : editor.get_document();
                        $telerik.addExternalHandler(element, "blur", function(e)  
                        {  
                            var labelUpdated;  
                            var editorContent = editor.get_html(true);  
                            if (lContent.textContent == editorContent)  
                                labelUpdated = false;  
                            else  
                                labelUpdated = true;  
                 
                            lContent.innerHTML = editorContent;  
                            tContent.style.display = 'none';  
                            lContent.style.display = '';  
         
                            if (labelUpdated)   
                            {  
                                //alert('Updating... ' + editorContent);  
                            }  
                        });  
                    }  
         
                    function lContent_Click()  
                    {  
                        lContent.style.display = 'none';  
                        tContent.style.display = '';  
           
                         var editor = $find("<%=RadEditor1.ClientID%>"); //get a reference to RadEditor client object  
                         editor.setFocus(); //set the focus on the the editor  
                         editor.set_html(lContent.innerHTML);
                     }
     
     
                     function OnClientLoadProjectDesc(editor, args) {
                         var topZone = $get(editor.get_id() + "Top");
                         topZone.setAttribute("unselectable", "on");
                         topZone.setAttribute("MozUserSelect", "none");
     
                         var buttons = topZone.getElementsByTagName("*");
                         for (var i = 0; i < buttons.length; i++) {
                             var a = buttons[i];
                             a.setAttribute("unselectable", "on");
                             a.style.MozUserSelect = "none";
                             a.style.MozUserFocus = "none";
                             a.style.MozUserFocus = "ignore";
                         }
     
                         var element = document.all ? editor.get_document().body : editor.get_document();
                         $telerik.addExternalHandler(element, "blur", function (e) {
                             var labelUpdated;
                             var editorContent = editor.get_html(true);
                             if (div1.textContent == editorContent)
                                 labelUpdated = false;
                             else
                                 labelUpdated = true;
     
                             div1.innerHTML = editorContent;
                             div2.style.display = 'none';
                             div1.style.display = '';
     
                             if (labelUpdated) {
                                 //alert('Updating... ' + editorContent);
                             }
                         });
                     }
          
     
                     function div1_Click() {
                         div1.style.display = 'none';
                         div2.style.display = '';
     
                         var editor = $find("<%=RadEditor2.ClientID%>"); //get a reference to RadEditor client object  
                         editor.setFocus(); //set the focus on the the editor  
                         editor.set_html(div1.innerHTML);
                     }
                </script>
     
            </telerik:RadCodeBlock>
     
        </form>
    </body>
    </html>
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 07 Jan 2014 Link to this post

    Hi Steeve,

    I have tried to reproduce the unexpected behavior but to no avail. You can watch a short video with the test in the attached archive and then tell me what I am missing. It may be possible that there are some global styles on your page that affect the proper appearance of the RadEditors on your page. For example the file "~/Styles/RadEditor.css" that is loaded in the first RadEditor. If that is so you can try removing all the styles and if that fixes the issue then start turning one by one the styles until you find and fix the problematic one. Such an example is illustrated in Distorted Appearance help article.

    If that is not the case I can suggest that you try to reproduce the issue with the attached VS example and then send it back to us, so that we can make an investigation locally.

    Regards,
    Danail Vasilev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. Steeve
    Steeve avatar
    17 posts
    Member since:
    Mar 2011

    Posted 07 Jan 2014 Link to this post

    Hi,

    I saw that you use IE10, but we still use IE9.  Can you try the same page with IE9 and tell me if you have my issue?

    On my side, I removed my css file and I still have the problem.

    Thank you

    Steeve
  7. Steeve
    Steeve avatar
    17 posts
    Member since:
    Mar 2011

    Posted 07 Jan 2014 Link to this post

    Hi Danail,

    I think that I found something interesting and I would like to share it with you to know if I am on the good way...

    In load and click function of the editor, I added instruction to set the height of the editor and the Content Area.  It works well, but I meet a problem...  If the text in div tag is "higher" than the height of the original size of the editor and I click on the div to show the editor, the AutoResizeHeight does not work and the size will be the original size.

    If I add or remove line in text, the AutoResizeHeight works.  My code is below.  Can you help me to find a solution??

    I have add screenshots inorder to illustrate my problem.  I'm still using IE9.

    Thank you

    Steeve

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="_Test2.aspx.cs" Inherits="Web._Test2" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head id="Head1" runat="server">
        <title>Untitled Page</title>
        <meta http-equiv="X-UA-Compatible" content="IE=8"/>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
             
            <br/><br/><br/>
            <div id="lContent" style="background-color: lightblue; min-height: 30px">First RadEditor<br/>First RadEditor<br/>First RadEditor<br/>First RadEditor<br/> END</div>  
         
            <div style="display:none" id="tContent">  
                <telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoadMandate" ToolbarMode="Default" EditModes="Design" Height="50" Width="856" AutoResizeHeight="True" >  
                    <Tools>
                        <telerik:EditorToolGroup>
                            <telerik:EditorTool Name="AjaxSpellCheck" Enabled="true" ShowIcon="true" />
                            <telerik:EditorTool Name="Cut" />
                            <telerik:EditorTool Name="Copy" />
                            <telerik:EditorTool Name="Paste" />
                            <telerik:EditorTool Name="Italic" />
                            <telerik:EditorTool Name="InsertSymbol" />
                            <telerik:EditorTool Name="Subscript" />
                            <telerik:EditorTool Name="Superscript" />
                            <telerik:EditorTool Name="Undo" />
                            <telerik:EditorTool Name="Redo" />
                        </telerik:EditorToolGroup>
                    </Tools>
                </telerik:RadEditor
            </div>
         
            <br/>
         
            <div id="div1" style="background-color: lightgray;">Second RadEditor</div>  
         
            <div style="display:none" id="div2">  
                <telerik:RadEditor runat="server" ID="RadEditor2" OnClientLoad="OnClientLoadProjectDesc">  
                        <Content>RadEditor 2</Content>  
                </telerik:RadEditor
            </div>
            <telerik:RadCodeBlock ID="radCodeBlock" runat="server">
     
                <script type="text/javascript">
                    var lContent, tContent;
                    lContent = $get('lContent');
                    tContent = $get('tContent');
                    $addHandler(lContent, "click", lContent_Click);
     
     
                    var div1, div2;
                    div1 = $get('div1');
                    div2 = $get('div2');
                    $addHandler(div1, "click", div1_Click);
             
                    function OnClientLoadMandate(editor, args) {
                        var topZone = $get(editor.get_id() + "Top");
                        topZone.setAttribute("unselectable", "on");
                        topZone.setAttribute("MozUserSelect", "none");
     
                        var buttons = topZone.getElementsByTagName("*");
                        for (var i = 0; i < buttons.length; i++) {
                            var a = buttons[i];
                            a.setAttribute("unselectable", "on");
                            a.style.MozUserSelect = "none";
                            a.style.MozUserFocus = "none";
                            a.style.MozUserFocus = "ignore";
                        }
     
                        //editor.setSize(856, 90);
                         
                        var element = document.all ? editor.get_document().body : editor.get_document();
                        $telerik.addExternalHandler(element, "blur", function(e)  
                        {  
                            var labelUpdated;  
                            var editorContent = editor.get_html(true);  
                            if (lContent.textContent == editorContent)  
                                labelUpdated = false;  
                            else  
                                labelUpdated = true;  
                 
                            lContent.innerHTML = editorContent;  
                            tContent.style.display = 'none';  
                            lContent.style.display = '';  
         
                            if (labelUpdated)   
                            {  
                                //alert('Updating... ' + editorContent);  
                            }
                        });
     
                        // ==== New Tests ====
                        var height = parseInt(editor.get_element().style.height.replace("px", "")) || 0;
     
                        if (height > 0) {
     
                            editor.get_contentAreaElement().style.height = height + "px";
     
                            var elem = editor.get_element();
                            elem.style.minHeight = height + 28;
                        }
                        // ==== End New Tests ====
                    }  
         
                    function lContent_Click()  
                    {  
                        lContent.style.display = 'none';  
                        tContent.style.display = '';  
           
                         var editor = $find("<%=RadEditor1.ClientID%>"); //get a reference to RadEditor client object  
                         editor.setFocus(); //set the focus on the the editor  
                         editor.set_html(lContent.innerHTML);
     
                         // ==== New Tests ====
                         var height = parseInt(editor.get_element().style.height.replace("px", "")) || 0;
     
                         if (height > 0) {
                             editor.get_contentAreaElement().style.height = height + "px";
                             editor.setSize(editor.get_element().style.width, height);
                         }
                         // ==== End New Tests ====
                     }
     
     
                     function OnClientLoadProjectDesc(editor, args) {
                         var topZone = $get(editor.get_id() + "Top");
                         topZone.setAttribute("unselectable", "on");
                         topZone.setAttribute("MozUserSelect", "none");
     
                         var buttons = topZone.getElementsByTagName("*");
                         for (var i = 0; i < buttons.length; i++) {
                             var a = buttons[i];
                             a.setAttribute("unselectable", "on");
                             a.style.MozUserSelect = "none";
                             a.style.MozUserFocus = "none";
                             a.style.MozUserFocus = "ignore";
                         }
     
                         var element = document.all ? editor.get_document().body : editor.get_document();
                         $telerik.addExternalHandler(element, "blur", function (e) {
                             var labelUpdated;
                             var editorContent = editor.get_html(true);
                             if (div1.textContent == editorContent)
                                 labelUpdated = false;
                             else
                                 labelUpdated = true;
     
                             div1.innerHTML = editorContent;
                             div2.style.display = 'none';
                             div1.style.display = '';
     
                             if (labelUpdated) {
                                 //alert('Updating... ' + editorContent);
                             }
                         });
                     }
          
     
                     function div1_Click() {
                         div1.style.display = 'none';
                         div2.style.display = '';
     
                         var editor = $find("<%=RadEditor2.ClientID%>"); //get a reference to RadEditor client object  
                         editor.setFocus(); //set the focus on the the editor  
                         editor.set_html(div1.innerHTML);
                     }
                </script>
     
            </telerik:RadCodeBlock>
     
        </form>
    </body>
    </html>
  8. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 08 Jan 2014 Link to this post

    Hello Steeve,

    Thank you for the additional information.

    I have successfully reproduced the mentioned issue and it stems from the code optimization that have been made to the resizing of the RadEditor. In order to handle it you can simply execute the editor's repaint() method after it is displayed and before calling the editor.set_html() method. For example:

    function lContent_Click() {
        lContent.style.display = 'none';
        tContent.style.display = '';
     
        var editor = $find("<%=RadEditor1.ClientID%>"); //get a reference to RadEditor client object 
        editor.setFocus(); //set the focus on the the editor 
        editor.repaint();
        editor.set_html(lContent.innerHTML);
    }


    Regards,
    Danail Vasilev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  9. Steeve
    Steeve avatar
    17 posts
    Member since:
    Mar 2011

    Posted 17 Mar 2014 in reply to Danail Vasilev Link to this post

    Hi Danail,

    I followed your advice, but it do not work.  But, I tried this and it seems to work.
    var height = parseInt(editor.get_element().style.height.replace("px", "")) || 0;
    if (height > 0) {
        editor.setSize(editor.get_element().style.width, height);
    }

    Thank you for your time and have a nice day!!!

    Steeve
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017