The image manager dialog do not resize properly in Chrome when the screen resolution is 1920x1080 and the Windows zoom level is 125%-150%-175%.
In Internet Explorer, all dialogs have scrolls - tested on 4k screen with 150% zoom.
See the attachments.
Workaround:
<script>
function OnClientCommandExecuted(editor, args) {
if (editor.get_dialogOpener()) {
var commandName = args.get_commandName();
if (editor.get_dialogOpener()._getDialogContainer) {
dialogReference = editor.get_dialogOpener()._getDialogContainer(commandName);
setTimeout(function () {
var dialogContainerHeight = parseInt(editor.get_dialogOpener()._getDialogContainer(commandName).get_contentElement().style.height);
dialogReference.set_height(dialogContainerHeight + 40);
dialogReference.get_contentElement().removeAttribute("style");
dialogReference.get_contentElement().style.height = dialogContainerHeight + 5 + "px";
}, 1000);
}
}
}
</script>
<telerik:RadEditor ID="RadEditor1" runat="server" OnClientCommandExecuted="OnClientCommandExecuted">
<ImageManager ViewPaths="~/" />
</telerik:RadEditor>
You can see this happening in the following demo page.
https://demos.telerik.com/aspnet-ajax/controls/examples/integration/ribbonbarandeditor/defaultcs.aspx?product=editor
I have also attached a snip showing this.
Hello,
The RadEditor's Design View became unusable in the latest Chrome Beta version (Version 73.0.3683.27). It is still working correctly on the latest stable Chrome 72, so I'm not sure if it is a problem that needs to be resolved on Chrome's end, just figured it'll be helpful to send this in as well.
The HTML view still works, but switching back to Design causes an exception (attached). This is also directly off of the demo page, so it doesn't look like implementation is a factor.
Hello, There seems to be an issue with the "Strip Span Elements" tool when pasting content into the editor in Design mode. I have made a screencast demonstrating the issue available here: https://www.screencast.com/t/1OZ1huYPde8H Reproduce: Open a RadEditor demo that has the "Strip Span Elements" option like the Overview(https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx) or the Right Editor in this demo(https://demos.telerik.com/aspnet-ajax/editor/examples/cleaningwordformatting/defaultcs.aspx). In a word document create text that when pasted into the editor has spans, for example changing the background color or the text color. Copy the text from the document into the "Design" mode of the editor. Select the text you would like to strip span's from (I used all of the text in the screencast example). Use the "Strip Span Elements" button. Switch the editor mode to HTML(The spans are not stripped). Switch back to design mode. Select the text you would like to remove spans from again. Use the "Strip Span Elements" button. The spans are now stripped. Expected result: Strip Span Elements option removes <span> tags from html directly after pasting into design mode. Actual result: Strip Span Elements option does not remove <span> tags on pasted text in the design mode until you navigate to HTML mode then back to design mode. Any help and suggestions are appreciated. Thanks, Calvin Williams
The problem can be reproduced on the track changes demo at https://demos.telerik.com/aspnet-ajax/editor/examples/trackchanges/defaultcs.aspx 1. Copy a list from word (Bullet or numbered doesn't matter, but numbered is more problematic) 2. Paste into the content area with track changes turned on 3. Apply Bold, Underline or Italics to the pasted list Result: The list seems to break itself into 3 separate lists all spaced further apart than initially. Numbered lists will go from 1,2,3 to having 1,1,1.
When resizing images in RadEditor design mode using the corner-handles the image should retain its aspect ratio. This works very good in Firefox (v. 41.0.2) out-of-the-box because the browser implements that functionality but not in IE (v. 11.0) or Chrome (46.0) in Windows 8.1 (v 6.3, build 9600).
While the RadEditor is able to now be used on Mobile devices more easily, the crux of the WYSIWYG for us is that when creating either HTML for web or emails, the HTML that is generated from the RadEditor doesn't always generate the code that follows or renders correctly on mobile devices. Ideally, the respective HTML that is generated is correctly output in Mobile Responsive format for all mobile devices.
You can press Delete or Backspace again to delete the remaining content
When part of a table from MS Excel is copied and pasted into RadEditor under Edge, the RadEditor inserts an image instead of the html for the table. It inserts <img alt="" src="data:image/png;base64, ... " /> instead of the html. IE 11, Chrome and Firefox all paste the html in the RadEditor but MS Edge pastes as an image. Is there a way for the radeditor to override this so the html is pasted instead of an image?
Steps:
1) Enter in HTML mode:
<ins author="RadEditorUser" command="Insert" timestamp="1635859985945" title="Inserted by RadEditorUser on 11/2/2021, 3:33:05 PM" class="reU0">
<table>
<tbody>
<tr>
<td> text</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> text</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>text </td>
</tr>
</tbody>
</table>
</ins>2) Select the word in cell 1
3) Apply Bold formatting
<ins author="RadEditorUser" command="Insert" timestamp="1635859985945" title="Inserted by RadEditorUser on 11/2/2021, 3:33:05 PM" class="reU0">
<table>
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</ins><ins author="RadEditorUser" command="Insert" timestamp="1635859985945" title="Inserted by RadEditorUser on 11/2/2021, 3:33:05 PM" class="reU0">
<table>
<tbody>
<tr>
<td><strong author="RadEditorUser" command="Bold" timestamp="1635860413199" title="Formatted by RadEditorUser on 11/2/2021, 3:40:13 PM" class="reFormat reU0">text</strong></td>
</tr>
</tbody>
</table>
</ins><ins author="RadEditorUser" command="Insert" timestamp="1635859985945" title="Inserted by RadEditorUser on 11/2/2021, 3:33:05 PM" class="reU0">
<table>
<tbody>
<tr>
<td></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> text</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>text </td>
</tr>
</tbody>
</table>
</ins>
The content of RadEditor does not get styled in div mode in IE11. The styling tag is added before the selected content, instead of around it (e.g. strong tag). https://www.screencast.com/t/HoqeLyeZX Steps to reproduce: 1. Open in IE11: https://demos.telerik.com/aspnet-ajax/editor/examples/contentareamodediv/defaultcs.aspx 2. Clear whole content and write some new symbols 3. Try to style the new content (e.g. make it bold)
Hi Telerik Team,
There is one recent problem we faced when copy paste from word document to Rad Editor. The spacing between the paragraphs is more than what exists in the word document.
The property we are using while copy paste from document to RadEditor
radTextEditor.StripFormattingOptions = Telerik.Web.UI.EditorStripFormattingOptions.MSWordNoMargins | Telerik.Web.UI.EditorStripFormattingOptions.ConvertWordLists;
The functionality working fine in IE 11.
We are using version telerik version ASP.NET AJAX Q2 2016.
Also there is a default font of Times New Roman in Edge browser which not in IE 11
Attached is the screenshot of html.
Please look into this.
Hi Telerik Team, There is one recent problem we faced when using RadEditor. The bottom line is distorted. We are using version telerik version ASP.NET AJAX Q2 2016. Attached is the screenshot of html.
When editing certain HTML layouts in a RadEditor on a Mac, when you right-click on the empty space to the right of the text content in a table cell inside a nested table, then click Row -> Insert Row Above, the editor inserts a row above the current row in one of the parent tables, instead of in the table containing the specific cell that was clicked on.
To reproduce, paste the following code into the HTML view of a RadEditor. Then switch to Design mode, and right click in the empty space to the right of the text "Type your message here!", but within the same table cell as that text. Select Row -> Insert Row Above, and see that the editor inserts a row into the wrong table.
This is only reproducible on a Mac, but it has been confirmed to happen in both Safari and Chrome.
The project this is for is currently using version 2016.3.1027, however I've pasted this code into the Telerik RadEditor demo at https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx , which I presume is running the latest version, and the problem is reproducible there also.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta content="width=device-width" name="viewport" />
<title>Newsletter from your Pro</title>
<style type="text/css">
<!--
-->
</style>
</head>
<body>
<table style="background-color: #C9CAC8 ;" cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td>
<table style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;" class="body" cellspacing="0" cellpadding="0" align="center" border="0" width="640">
<tbody>
<tr>
<td style="background-color: #ffffff; height: 60px;" class="side-pad" colspan="6" align="center"><span style="text-align: center;" class="devicewidthinner"></span></td>
<td style="background-color: #ffffff; height: 60px;" class="side-pad" align="center"><span style="font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: #63666a;">February 5, 2019</span></td>
</tr>
<tr>
<td style="background-color: #ffffff; height: 87px;" class="side-pad" colspan="6" align="center"><span class="devicewidth"></span></td>
<td style="background-color: #ffffff;" class="side-pad" align="center"></td>
</tr>
<tr>
<td style="background-color: #d55c19; width: 201px; height: 30px;" class="side-pad" align="center"><span style="text-align: center; font-weight: normal; line-height: 24px; font-family: Helvetica, Arial, sans-serif; font-size: 13px; color: #ffffff;"><a style="color: #fff; text-decoration: none;" href="http://www.test.com">Visit website</a></span></td>
<td style="background-color: #ffffff; width: 4px;" class="side-pad" align="center"> </td>
<td style="background-color: #d55c19; width: 86px;" class="side-pad" align="center"><span style="font-family: Helvetica, Arial, sans-serif; font-size: 13px; color: #ffffff;"><a style="color: #fff; text-decoration: none;" href="mailto:test@test.com">Email me!</a></span></td>
<td style="background-color: #ffffff; width: 4px;" class="side-pad" align="center"> </td>
<td style="background-color: #d55c19; width: 122px;" class="side-pad" align="center"><span style="text-align: center; line-height: 15px; font-family: Helvetica, Arial, sans-serif; font-size: 13px; color: #ffffff;">123-456-7890</span></td>
<td style="background-color: #ffffff; width: 4px;" class="side-pad" align="center"> </td>
<td style="background-color: #63666a; width: 201px; height: 30px;" class="side-pad" align="center"><span style="text-align: center; font-weight: normal; font-size: 12pt; line-height: 24px; font-family: Helvetica, Arial, sans-serif; color: #ffffff;">Test Testerson</span></td>
</tr>
<tr>
<td style="background-color: #ffffff;" class="side-pad" colspan="7" align="center">
<table class="container" cellspacing="0" cellpadding="0" align="center" border="0" width="600">
<tbody>
<tr>
<td style="height: 250px;" align="center">
<table class="row" cellspacing="0" cellpadding="0" align="center" border="0" width="580">
<tbody>
<tr>
<td style="height: 250px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td style="width: 100%; height: 205px;" valign="top">
<table style="mso-table-lspace:0;mso-table-rspace:0;" cellspacing="0" cellpadding="0" align="left" border="0" width="100%">
<tbody>
<tr>
<td style="font-size: 14px; color: #63666a; font-weight: normal; line-height: 20px; width: 205px;" colspan="4" valign="top"> </td>
</tr>
<tr>
<td style="font-size:14px; color:#63666a; font-weight:normal; text-align:left; line-height:20px;" colspan="4" valign="top"><span style="font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: #63666a;">Type your message here!</span></td>
</tr>
<tr>
<td style="font-size:14px; color:#63666a; font-weight:normal; text-align:left; line-height:20px;" colspan="4" valign="top"> </td>
</tr>
<tr>
<td style="font-size:14px; color:#63666a; font-weight:normal; text-align:left; line-height:20px;" colspan="4" valign="top"> </td>
</tr>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif; font-weight: normal; font-size:14px; color: #63666a; line-height:18px; text-align:left;" colspan="4">
<p> </p>
</td>
</tr>
<tr>
<td colspan="4" valign="top"> </td>
</tr>
<tr>
<td colspan="4" valign="top"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="background-color: #63666a;" class="side-pad" colspan="7" align="center">
<table class="container" cellspacing="0" cellpadding="0" align="center" border="0" width="600">
<tbody>
<tr>
<td align="center">
<table class="row" cellspacing="0" cellpadding="0" align="center" border="0" width="580">
<tbody>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr bgcolor="#63666A">
<td style="height: 18px;" valign="top" align="center"> </td>
</tr>
<tr>
<td valign="top">
<table style="mso-table-lspace:0;mso-table-rspace:0;" class="full-width collapse" cellspacing="0" cellpadding="0" align="left" border="0" width="100%">
<tbody>
<tr>
<td style="font-size:12px; color:#63666a; font-weight:normal; text-align:left;" class="center">
<p><span style="font-size: 12px; line-height: 14px; text-align: left; font-family: Helvetica, Arial, sans-serif; color: #ffffff;" class="footer">Here is some footer text.</span></p>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="center" valign="top" align="center"> </td>
</tr>
<tr>
<td class="center" valign="top" align="center">
<table cellspacing="0" cellpadding="0" align="center" border="0">
<tbody>
<tr>
<td align="center"></td>
<td style="width: 12px;" align="center"> </td>
<td align="center"></td>
<td style="width: 12px;" align="center"> </td>
<td align="center"></td>
<td style="width: 12px;" align="center"> </td>
<td align="center"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="background-color: #636666a;">
<td style="background-color: #63666a;" class="side-pad" colspan="7" align="center">
<table class="container" cellspacing="0" cellpadding="0" align="center" border="0" width="600">
<tbody>
<tr>
<td align="center">
<table class="row" cellspacing="0" cellpadding="0" align="center" border="0" width="580">
<tbody>
<tr>
<td style="height: 20px;"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p> </p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Setup:
- Create a page with a basic Rad Editor, with HTML mode enabled
- Go into HTML Mode, add at least the following:
<input type="number" /> - Go back to Design Mode
- Click on the numeric input
To See the Problem:
- In the console of the Browser's Developer Tools, get a reference to the Rad Editor
- Call its getSelectedElement() function
- In Chrome, the returned element will be a <body> tag (NOT GOOD)
- In Firefox, it will be an apparently random (maybe the first?) user-selectable element within the HTML (NOT GOOD)
- In IE11, it will be the numeric input (DESIRED)
- In Edge, it will be a <body> tag (NOT GOOD)
Here examle:
Case 1. RadEditor is LightWeight:
<telerik:RadEditor ID="redEdt" runat="server" RenderMode="LightWeight" Width="100%" Height="500px" ></telerik:RadEditor>
<script>
$(document).ready(function () {
var editor = $telerik.findControl(document.documentElement, "redEdt");
editor.enableEditing(false);
})
</script>
--> It work great. All buttons in toolbar disabled.
Case 2. RadEditor is Mobile:
<telerik:RadEditor ID="redEdt" runat="server" RenderMode="Mobile" Width="100%" Height="500px" ></telerik:RadEditor>
<script>
$(document).ready(function () {
var editor = $telerik.findControl(document.documentElement, "redEdt");
editor.enableEditing(false);
})
</script>
--> System error:
M.enableContextMenus is not a function
at c.RadEditor.enableEditing
I am using Telerik.WEB.UI version: 2018.1.117.45 in my website. I am getting as issue in RADEditor control when I create a hyperlink within Editor. Right clicking on that hyperlink opens a context menu, when I click on properties from the context menu, it opens an 'Image Manager' instead of 'Hyperlink Manager'.
The issue is occurring only in IE 11, rest all the browsers are opening 'Hyperlink Manager'. Please advise.
Thank you
There's a bug in the RadEditor WordListConverter convert method. See the attached image for details. Note that the variable z is initialized and treated as an array (a stack, actually, with its items being pushed in and popped out). However, perhaps because of a naming scope failure in the js-minifier, the z variable is, under certain conditions, set equal to an HTMLCollection, so a subsequent z.push method call fails.
This sample Word document reproduces the error. It is admittedly full of bad list formatting, because it began life as a PDF, but it does exercise the RadEditor code in a way that causes the problem. Select and copy its content and paste it in the RadEditor demo page here:
https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx
Click OK to "clean" the pasted content and note that nothing appears because of the error shown in the attached image.
Verified in the latest Chrome and FF builds on Windows 10.
This behavior is occuring only if use firefox browser:
1. If you set the EditModes within backend only to EditMode.Preview then all html table elements within content appears like in EditMode.Design with dashed borders.
You can reproduce it on your own demo site https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx simple disable EditMode.Html and EditMode.Design.
Now you see the dashed table element borders like in design mode....
2. Sometimes if you switch edit mode from Html to Preview the same affect is occuring with displaying dashed border with html table elements. If you switch directly from Design mode to preview mode all works fine.
3. If you resize the editor in preview mode with resize button on right lower corner the display switch immediatly to dashed borders for all html table elements...
At the moment we use a fix to reset preview mode: If only preview mode is activated for the editor we set the preview mode again with a timeout of 250 ms after loading of dialog is ready (if the timeout is to low no affect appear).
Sys.Application.add_load(function(){ window.setTimeout(function(){$find('AjaxEditorClientID').set_mode(4)},250); }); });
Regards
Thomas
I've been trying to upgrade an existing solution to use the latest release version (2019) of the Telerik UI for ASP.NET AJAX and have encountered a major problem with the 'Tool Provider', a technique which is significantly used in my solution. This same error displays in your own Telerik Demo. Details are:
Description of the issue
Having multiple RadEditors on the same page, and trying the
property "ToolProviderID" (to reuse the same floating tool amongst
the different editors on the same page), causes a "javascript
exception" on the client side.
URL of the Demo (Telerik
Website)
https://demos.telerik.com/aspnet-ajax/editor/examples/toolprovider/defaultcs.aspx
Exception description
Uncaught TypeError: R.get_canAcceptTrackChange is not a function
at c.RadEditor._initializeToolProvider (RadEditor.js:8239)
at c.RadEditor.initialize (RadEditor.js:8297)
at c.RadEditor.endUpdate (Telerik.Web.UI.WebRe…597d4b%3ab25378d2:6)
at Sys._Application.endCreateComponents (Telerik.Web.UI.WebRe…597d4b%3ab25378d2:6)
at Sys.WebForms.PageRequestManager._scriptsLoadComplete (Telerik.Web.UI.WebRe…97d4b%3ab25378d2:15)
at Sys.WebForms.PageRequestManager.<anonymous> (Telerik.Web.UI.WebRe…597d4b%3ab25378d2:6)
at Telerik.Web.UI.WebRe…597d4b%3ab25378d2:6
at Sys._ScriptLoader._loadScriptsInternal (Telerik.Web.UI.WebRe…97d4b%3ab25378d2:15)
at Sys._ScriptLoader._loadScriptsInternal (Telerik.Web.UI.WebRe…97d4b%3ab25378d2:15)
at Sys._ScriptLoader._loadScriptsInternal (Telerik.Web.UI.WebRe…97d4b%3ab25378d2:15)
How to reproduce the error
(on Telerik demo website)
- Mark the checkbox at the bottom of the page and click on
"Update":
(the error can be seem on console, pressing F12)
Error message happening in
our system
Sample code, causing
the issue (our system)Refer the attached image.