This is a migrated thread and some comments may be shown as answers.
Editor toolbar disapper when using set_useClassicDialogs(true)
10 Answers 16 Views
This is a migrated thread and some comments may be shown as answers.
Rajiv
Top achievements
Rank 1
Rajiv asked on 11 Apr 2019, 03:15 PM

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>

10 Answers, 1 is accepted

Sort by
0
Rajiv
Top achievements
Rank 1
answered on 15 Apr 2019, 09:09 AM

Hi 

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

 

Thanks

0
Rumen
Telerik team
answered on 16 Apr 2019, 02:14 PM
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.
0
Rajiv
Top achievements
Rank 1
answered on 24 Jun 2019, 12:12 PM

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.

 

0
Accepted
Rumen
Telerik team
answered on 25 Jun 2019, 01:34 PM
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.
0
Rajiv
Top achievements
Rank 1
answered on 25 Jun 2019, 02:48 PM

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.

0
Rajiv
Top achievements
Rank 1
answered on 26 Jun 2019, 06:46 AM

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.

0
Rumen
Telerik team
answered on 26 Jun 2019, 07:45 AM
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.
0
Rajiv
Top achievements
Rank 1
answered on 26 Jun 2019, 08:07 AM

 

Rumen its also nit fixed  with the latest version 2019.2.514.

 

Please give any other solution.

 

Thanks.

0
Rumen
Telerik team
answered on 26 Jun 2019, 08:11 AM
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.
0
Rajiv
Top achievements
Rank 1
answered on 27 Jun 2019, 06:33 AM

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

 

 

Asked by
Rajiv
Top achievements
Rank 1
Answers by
Rajiv
Top achievements
Rank 1
Rumen
Telerik team
Share this question
or