This is a migrated thread and some comments may be shown as answers.

Editor toolbar disapper when using set_useClassicDialogs(true)

10 Answers 122 Views

Editor

This is a migrated thread and some comments may be shown as answers.

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

answered on 16 Apr 2019, 02:14 PM

RadEditorToolbarTest.zip

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.

answered on 24 Jun 2019, 12:12 PM

untitled6509e1ed9abd49c0b2d5ec1f758cfed0.png

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.

Accepted

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Editor toolbar disapper when using set_useClassicDialogs(true)

10 Answers, 1 is accepted