Editor toolbar disapper when using set_useClassicDialogs(true)

11 posts, 1 answers
  1. Rajiv
    Rajiv avatar
    16 posts
    Member since:
    Aug 2018

    Posted 11 Apr Link to this post

    Hi Rumen,

    I found one more issue in rad editor after taking latest version 2018.2.710.45 telerik dll.
    While i trying to upload any image from rad editor tools and second time trying to edit the editor,Editor tools not coming.
     It was working fine in version 2013.2.717.45 but it is not working in 2018.2.710.45(which i upgrade) and also not working with latest version 2019.1.215.

    Steps to reproduce
    1.click on editor, it will be edited and rad tools will come on the top
    2.try to add image from tools(insert/cancel from popup).
    3.click outside the editor.
    4.again click on editor it will be edited but toolbar  is not showing.

    when i am using set_useClassicDialogs(true) then only it happens.

    If i passed false then its working fine.

     

    code given below.

     

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Metricaadmin.WebForm1" %>

    <html>
    <head>

        <script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>

        <style>
            .annotation {
                border: 1px solid red;
                width: 600px;
                position: relative;
            }
        </style>
    </head>

    <body>


        <script type="text/javascript">
            var isEditing = false;
            var currentEditor;

            function setEditorVisible(toShow) {
                var editorWrapper = $get("editorWrapper");

                if (toShow) {
                    editorWrapper.style.visibility = "visible";
                    editorWrapper.style.position = "";
                }
                else {
                    editorWrapper.style.visibility = "hidden";
                    editorWrapper.style.position = "absolute";
                }
            }

            function editAnnotation(target, ev) {
                //Cancel the event - prevent it to reach body    
                //TODO: Add more stuff to cancel it in Mozilla    
                ev.cancelBubble = true;
                ev.returnValue = false;

                //Check if already editing    
                if (isEditing) return;

                var editorWrapper = $get("editorWrapper");
                var editor = $find("<%=RadEditor1.ClientID %>");

                //Position the editor next to the div, hide the div    
                var bounds = $telerik.getBounds(target);

                //Do not set the size explicitly anymore - witn new version when using abs positioning    
                editor.setSize(bounds.width, bounds.height);

                target.parentNode.insertBefore(editorWrapper, target);

                setEditorVisible(true);

                currentEditor = editor;


                target.style.display = "none";

                //set editor content    
                editor.set_html(target.innerHTML);

                //Prevent from moving the editor to another annotation while editing current one    
                isEditing = true;

                setTimeout("showEditor();", 1000);
            }

            function showEditor() {
                currentEditor.onParentNodeChanged();
            }


        </script>

        <form runat="server">

            <asp:ScriptManager ID="s1" runat="server"></asp:ScriptManager>
            <script type="text/javascript">
                var currentEditorObject = null;
                var focusEditor = null;

                function e1_ClientLoad(editor, eventArgs) {
                    editor.set_useClassicDialogs(true);
                    editor.removeShortCut("InsertTab");
                    currentEditorObject = editor;
                }

                function hideEditor() {
                    if (isEditing) {

                        var editorWrapper = $get("editorWrapper");

                        var parent = editorWrapper.parentElement;
                        while (parent.style.position != "absolute") {
                            parent = parent.parentElement;
                        }

                        var st = parent.scrollTop;
                        var sl = parent.scrollLeft;



                        var target = $($(editorWrapper).parent()).children().first();
                        var newVal = currentEditorObject.get_html(true);

                        $(target).next().val(newVal); //hidden input tag
                        $(target).html(newVal); //anchor tag
                        setEditorVisible(false);
                        $(target).show();
                        target.focus();

                        parent.scrollTop = st;
                        parent.scrollLeft = sl;
                    }

                    isEditing = false;
                }
                ////MET-8615
                //Radeditor edit error after telerik upgrade 
                //hot fix from  telerik website
                Telerik.Web.UI.Editor.Utils.isWindowDestroyed = function (window) {
                    var doc;
                    try {
                        doc = window.document;
                    } catch (e) {
                        return true;
                    }
                    if (!doc) {
                        return true;
                    }
                    return !doc.defaultView && !doc.parentWindow;
                }
            </script>
            <div id="tempEditorWrapper" style="visibility: hidden; position: absolute; top: 0px; z-index: 10002" class="tempeditorWrapper">

            <div id="editorWrapper" style="visibility: hidden; position: absolute; top: 0px; z-index: 10002" onclick="hideEditor();" class="editorWrapper">

                <div class="editorBackground"></div>

                <div class="editorBorder">
                <telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="e1_ClientLoad" ToolbarMode="ShowOnFocus" 
                    Height="300px" EditModes="Design">
                    <Tools>
                        <telerik:EditorToolGroup>
                            <telerik:EditorTool Name="AjaxSpellCheck" />
                            <telerik:EditorTool Name="Cut" />
                            <telerik:EditorTool Name="Copy" />
                            <telerik:EditorTool Name="PasteStrip" />
                            <telerik:EditorTool Name="Bold" />
                            <telerik:EditorTool Name="Italic" />
                            <telerik:EditorTool Name="Underline" />
                            <telerik:EditorTool Name="Superscript" />
                            <telerik:EditorTool Name="Subscript" />
                            <telerik:EditorTool Name="FormatStripper" />
                            <telerik:EditorTool Name="JustifyLeft" />
                            <telerik:EditorTool Name="JustifyRight" />
                            <telerik:EditorTool Name="JustifyCenter" />
                            <telerik:EditorTool Name="JustifyFull" />

                            <telerik:EditorTool Name="InsertLink" />
                            <telerik:EditorTool Name="InsertSnippet" />
                            <telerik:EditorTool Name="ImageManager" />
                            <telerik:EditorTool Name="InsertTable" />
                            <telerik:EditorTool Name="ApplyClass" />
                            <telerik:EditorTool Name="InsertSymbol" />
                            <telerik:EditorTool Name="InsertParagraph" />
                            <telerik:EditorTool Name="InsertOrderedList" />
                            <telerik:EditorTool Name="InsertUnorderedList" />
                        </telerik:EditorToolGroup>
                    </Tools>
                    <Modules>
                        <telerik:EditorModule Name="RadEditorStatistics" />
                    </Modules>
                    <DocumentManager SearchPatterns="*.*" ViewPaths="~/" UploadPaths="~/" />
                    <ImageManager ViewPaths="~/" UploadPaths="~/" />
                    <CssFiles>
                        <telerik:EditorCssFile Value="~/styles/editor.css" />
                    </CssFiles>
                    <Content>   
           
           
                    </Content>
                </telerik:RadEditor>
            </div>
                </div>
                </div>

            click to edit an annotation.<br />
            To Cancel editing - double-click outside any div, in the BODY<br />
            To save the changes to the edited DIV click on Save button     
            <br />
            <br />
            Annotation 1    
            <div class="annotation" onclick="editAnnotation(this, event)">
                This is sample content     
            </div>


        </form>

    </body>
    </html>

  2. Rajiv
    Rajiv avatar
    16 posts
    Member since:
    Aug 2018

    Posted 15 Apr in reply to Rajiv Link to this post

    Hi 

    @Rumen/Admin can anyone help me regarding above issue.

     

    Thanks

  3. Rumen
    Admin
    Rumen avatar
    14028 posts

    Posted 16 Apr Link to this post

    Hi Rajiv,

    I tested the provided code but it does not replicate the reported toolbar problem.

    It is trowing a JS error when trying to hide the editor wrapper: Cannot read property 'style' of null.

    Please modify the attached web site project so that it starts to demo the toolbar issue and send it back for examination.

    On a side note, can you please tell me why do you use the set_useClassicDialogs(true) method? Nowadays the browsers do no block the RadWindow based dialogs so you do not need to set the set_useClassicDialogs(true), which will solve the reported issue.

    Regards,
    Rumen
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  4. Rajiv
    Rajiv avatar
    16 posts
    Member since:
    Aug 2018

    Posted 24 Jun Link to this post

    Hello Rumen,

    While i am using set_useClassicDialogs=false; 

    then i am facing a problem that pop not fits into screen.

    This is happen only in below aspect ratio of the system resolution.

    1>. 5:4
    2>. 4:3
    3>.16:9 when resolution below 1280.

     

    I am trying to open popup in half screen of the above settings. but popup not fully fits into screen.

     

    can you please give any solution for that.

     

    Thanks.

     

  5. Answer
    Rumen
    Admin
    Rumen avatar
    14028 posts

    Posted 25 Jun Link to this post

    Hi Rajiv,

    Can you please test with the latest version 2019.2.514?

    If the problem still persists, try switching to RenderMode="Lightweight" and repeat the test.

    Regards,
    Rumen
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  6. Rajiv
    Rajiv avatar
    16 posts
    Member since:
    Aug 2018

    Posted 25 Jun in reply to Rumen Link to this post

    Hi Rumen,

    Its working with RenderMode="Lightweight" but design looks like black and white :) 

    Is it possible to same design in LightWeight mode.

    If  yes then please let me know.

     

    Thanks.

  7. Rajiv
    Rajiv avatar
    16 posts
    Member since:
    Aug 2018

    Posted 26 Jun in reply to Rumen Link to this post

    Hi Rumen,

     

    If i am using RenderMode="Lightweight" then pop issue fixed but other functionality not working properly.

    can you give a proper solution.

    Is there any option for drag and resize or expand the popup.

     

    Thanks.

  8. Rumen
    Admin
    Rumen avatar
    14028 posts

    Posted 26 Jun Link to this post

    Hello,

    The contents of the Image Manager have fixed size and for that reason the dialog is not resizable. This is true for Classic and Lightweight render modes - https://demos.telerik.com/aspnet-ajax/editor/examples/rendermodes/defaultcs.aspx.

    The black and white is due to that the lightweight render mode does not use image sprites, but font icons, which does not support multiple colors as the image sprites.

    Regards,
    Rumen
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  9. Rajiv
    Rajiv avatar
    16 posts
    Member since:
    Aug 2018

    Posted 26 Jun in reply to Rumen Link to this post

     

    Rumen its also nit fixed  with the latest version 2019.2.514.

     

    Please give any other solution.

     

    Thanks.

  10. Rumen
    Admin
    Rumen avatar
    14028 posts

    Posted 26 Jun Link to this post

    Hi Rajiv,

    Can you explain what is not fixed in 2019.2.514 by:
    - opening a support ticket
    - providing a screenshot of the problem
    - providing an example demonstrating the problem?

    Thank you.

    Regards,
    Rumen
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  11. Rajiv
    Rajiv avatar
    16 posts
    Member since:
    Aug 2018

    Posted 27 Jun in reply to Rumen Link to this post

    Hi Rumen,

     

    I think my problem is fixed except black and white which you explained earlier.

     

    Now its working fine.Thanks for your support.

     

    Thanks,

    Rajiv

     

     

Back to Top