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>
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.
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
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
After upgrading the Telerik controls to v2019.1.115.45 we are seeing an issue with the RadEditor control. The issue is that the Toolbar formatting buttons like Bold, Underline etc. do not work for a particular scenario.
Scenario
<telerik:RadTabStrip runat="server" ID="RadTabStrip2" MultiPageID="RadMultiPage2" SelectedIndex="0"> <Tabs> <telerik:RadTab Text="Add Response"></telerik:RadTab> </Tabs></telerik:RadTabStrip><telerik:RadMultiPage runat="server" ID="RadMultiPage2" SelectedIndex="0"> <telerik:RadPageView runat="server" ID="RadPageView11"> <telerik:RadEditor Width="100%" EditModes="Design" ID="reReqCom" runat="server" ContentAreaCssFile="~/AppRoot/Xml/RadEditor/EditorContentArea.css" ToolsFile="~/AppRoot/Xml/RadEditor/BasicTools.xml" Skin="Material" /> </telerik:RadPageView></telerik:RadMultiPage>The problem here is only using the iPhone (ioS), that the user is NOT able to select onto the RadEditor to begin typing. Seems to somehow block it out. I have stripped down to the basic code above and tested.
Can you tell us if this is a known issue?
Is there a workaround?
Don
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.
I am facing a big problem in editor please give any solution.
Link: https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx
Steps to reproduce
Step 1
Try to insert table from Insert Table from editor toolbar.
Step 2
Right click on cell then click on Table/cell properties. A table wizard popup will come.
Step 3
Click on Table Layouts tab on the table wizard popup.
Step 4
Select any value from table styles drop down.
Step 5
Now you can see TABLE>TR>TD>RemoveElement on the bottom of the editor.click on RemoveElement .
After click on RemoveElement you can see STYLE>RemoveElement again click on RemoveElement.
then you can see like below in the editor.
.telerik-reTable-2 { border-collapse: collapse; border: solid 0px; font-family: Tahoma; } .telerik-reTable-2 tr.telerik-reTableHeaderRow-2 { border-width: 1.0pt 1.0pt 3.0pt 1.0pt...........
Video: https://www.screencast.com/t/rzmzuZ0UFa
Steps to reproduce:
1. Open in IE 11: https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx
2. Insert a video through the Media Manager
3. Click over a tool having a drop-down menu (e.g. the Format tool)
Result: The heavy-weight object of the video is shown above the shown drop-down menu.
In the normal editing mode, you can edit the table properties by right clicking inside the table to get the context menu, then choose table properties, add row etc.
In Inline editing mode, it shows the context menu but when you click on any item it says to select the table. None of the other context menu commands like inserting rows etc work.
I have tested on your demo site and you should be able to simulate it there.
How can I set the position of the add comment window as per by requirement?
The problem happens when enter a period . , single ' or " double quote on a new line.
The HTML source shows the property cellpadding being added but not shown in the properties window.
Sample Page code
<h1>Editor 1</h1>
<telerik:RadEditor ID="editor1" runat="server" RenderMode="Lightweight"></telerik:RadEditor>
<h1>Editor 2</h1>
<telerik:RadEditor ID="editor2" runat="server" RenderMode="Lightweight"></telerik:RadEditor>
ConvertWordLists errors out when pasting bullets in a nested table inside another table from Word.
Test with the attached word doc in the https://demos.telerik.com/aspnet-ajax/editor/examples/cleaningwordformatting/defaultcs.aspx demo and you'll get the following error:
RadEditor.js:17416 Uncaught TypeError: Cannot read property 'appendChild' of nullat b.WordListConverter.insertList (RadEditor.js:17416)
at b.WordListConverter.convert (RadEditor.js:17570)
at Object.convertWordLists (RadEditor.js:257)
at Object.cleanPastedContent (RadEditor.js:146)
at c.RadEditor._onAfterPaste (RadEditor.js:10229)
at c.RadEditor.afterPasteDelegate (Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_QsfScriptManager_TSM&compress=1&_TSM_CombinedScripts_=%3b%3bSystem.Web.Extensions%2c+Version%3d4.0.0.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d31bf3856ad364e35%3aen-US%3ad28568d3-e53e-4706-928f-3765912b66ca%3aea597d4b%3ab25378d2:6)
We are using CDN and combined scripts as much as possible, and have run into an issue with the RadEditor and applying custom CSS Classes break, e.g. the applied CSS class on the selected content gets stripped for example from
.laystyle
to
.l
Images in a RadEditor can be resized two ways:
1. Using the image properties dialog and keying in width/height. The aspect ratio can be locked here so that keying in width updates height accordingly, and vice versa.
2. Clicking and dragging the resize handles. This does not maintain the aspect ratio of the image, even when the aspect ratio lock option is enabled in the image properties dialog.
Request: That the image aspect ratio lock option in the image properties dialog applies when dragging the resize handles.
Hello Telerik Team,
This is regarding The SpellCheck functionality in the Telerik Editor. Basically whenever a user activates the the SpellCheck from the "✓abc" button, the page automatically scrolls based on the position of the word. This does not give a good user experience and makes it difficult to work on the page.
We have seen this issue in the demos you have on your site as well.
URL: https://demos.telerik.com/aspnet-ajax/editor/examples/spellchecker/defaultcs.aspx
To Replicate go to this URL and follow the process below:
- Click on the "✓abc" button at the top left corner of the editor (1 In Image).
- Notice that the "Suggestion box" scroll the whole page. (2 In Image)
- Also, if you click on any other word (marked in YELLOW) in the editor, the same issue can be replicated. (3 In Image)
For your reference, we have attached a screenshot of the editor we have in our website.
Let us know if you require any further information to debug it.
Thank you,
Prateek Sanganeria
When the RenderMode property is set to Lightweight, File manager dialogs still load with Classic render mode, even when the <add key="Telerik.Web.UI.RenderMode" value="Lightweight" /> is set globally in the web.config:
<telerik:radeditor RenderMode="Lightweight" runat="server" id="mainRadEditor" EditModes="Design" >
<Tools>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="ImageManager"/>
<telerik:EditorTool Name="DocumentManager"/>
</telerik:EditorToolGroup>
</Tools>
</telerik:radeditor>
This is causing rendering problems and some of the icons do not load.