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)
You can get the same behavior that all other browsers get - focus being after the table. This is done easily by clearing out the following function logic (make sure the script is after the script manager):
<script>
Telerik.Web.UI.Editor.TableDeleteRow.prototype.selectAnotherRow = function () { }
</script>
You can also try the following version of the function that attempts to fix the selection collapse after the DOM changed:
<script>
Telerik.Web.UI.Editor.TableDeleteRow.prototype.selectAnotherRow = function (layoutBuilderEngine) {
if ($telerik.isIE9Mode) {
var arStateIndexes = layoutBuilderEngine._getLeftTopStateIndexes(layoutBuilderEngine._selectedRowIndex, layoutBuilderEngine._selectedCell.cellIndex);
var stateRow = arStateIndexes["rowIndex"];
var nextCell = layoutBuilderEngine._getSelectedTableCellByStateIndexes(stateRow + 1, 0);
var prevCell = layoutBuilderEngine._getSelectedTableCellByStateIndexes(stateRow - 1, 0);
var newSelectedCell = nextCell || prevCell;
if (newSelectedCell) {
var editorSelection = this.get_editor().getSelection();
setTimeout(function () {
try {//the DOM change is likely to cause errors after the fixes, hence the try-catch, the timeout is to let the DOM get changed before tampering with the selection
if ($telerik.$(newSelectedCell).is(':visible')) {//for deleting footer cells
editorSelection.selectElement(newSelectedCell);
editorSelection.moveToElementText(newSelectedCell);//to properly move focus
editorSelection.collapse(true);
}
}
catch (ex) { }
});
}
}
}
</script>
Considering the drawbacks of fixing IE code that is also inconsistent with other browsers, it is possible that the final fix will be to remove the function and have the same behavior as in other browsers.
Repro steps:
- use the editor below and the attached Word document in the archive at the end
- copy the document content in the editor
- clean the word formatting
- select some of the content (e.g., one paragraph)
- click the format stripper dropdown and choose Strip Span Elements
- run get_html(true) in the console
Expected: spans are stripped only from the selected content
Actual: nothing is stripped. Changing to HTML mode and back to Design fixes this, so you should not use that to check the HTML
<telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1">
<Tools>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="FormatStripper" />
</telerik:EditorToolGroup>
</Tools>
</telerik:RadEditor>
WORKAROUNDS:
For the majority of cases you can set up automatic stripping of span elements when pasting from Word, so your users do not need to do that themselves. Here is an example:
<telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1"
StripFormattingOptions="ConvertWordLists, MSWordNoMargins, Span">
<Tools>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="FormatStripper" />
</telerik:EditorToolGroup>
</Tools>
</telerik:RadEditor>
You can read more on how stripping MS Word content works in the following demo, and play around with the various options to see what works best for your case: http://demos.telerik.com/aspnet-ajax/editor/examples/cleaningwordformatting/defaultcs.aspx and in the following documentation article: https://docs.telerik.com/devtools/aspnet-ajax/controls/editor/managing-content/pasting-content/clean-ms-word-formatting
There are also two possible code workarounds so advanced users can retain more control over the HTML without switching to the HTML mode themselves.
The second is likely to be a tad faster with large content, but the first is likely to produce better user experience.
1) this changes the mode to HTML and back to design with each paste so that the stripping tool can work with the selection
<telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1"
OnClientCommandExecuted="OnClientCommandExecuted">
<Tools>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="FormatStripper" />
</telerik:EditorToolGroup>
</Tools>
</telerik:RadEditor>
<script>
function OnClientCommandExecuted(sender, args) {
if (args.get_commandName() == "Paste") {
sender.set_mode(2);
setTimeout(function () {
sender.set_mode(1);
}, 50);
}
}
</script>
2) this one is a workaround that allows the stripping tool to work without mode change, but it will not operate with the selection but with all the content
<telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1"
OnClientCommandExecuting="OnClientCommandExecuting">
<Tools>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="FormatStripper" />
</telerik:EditorToolGroup>
</Tools>
</telerik:RadEditor>
<script>
function OnClientCommandExecuting(sender, args) {
if (args.get_commandName() == "StripSpan") {
sender.set_html(sender.get_html(true));
}
}
</script>
If misspelled word is coming after scroll bar it is not focusing in IE11, Edge and Chrome. Can be reproduced in the default demo - https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx Paste the following content <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p>risksss</p> and click on the spell check button. The popup with the suggestions will be positioned outside of the content area. As a workaround you can switch to DIV content area mode - https://demos.telerik.com/aspnet-ajax/editor/examples/contentareamodediv/defaultcs.aspx
We have an issue with paragraph styles which have some custom classes.
It has different behavior depending on how you select your paragraph.
In some cases, when you fully select your paragraph the class remains the same the previous paragraph.
Please see the video of issue reproducing on the Telerik demo for more details:
https://www.screencast.com/t/xg9b1imVO
Workaround:
<script type="text/javascript">
function OnClientCommandExecuting(editor, args) {
//The command name
var commandName = args.get_commandName();
//The tool that initiated the command
if (commandName == "FormatBlock") {
//editor.get_document().execCommand("FormatBlock", false, "div");
var selectedElement = editor.getSelectedElement();
if (selectedElement.getAttribute("style")) {
selectedElement.removeAttribute("style");
}
else if (selectedElement.getAttribute("class")) {
selectedElement.removeAttribute("class");
}
}
}
</script>
<telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1" ToolsFile="Tools.xml" Width="800px" OnClientCommandExecuting="OnClientCommandExecuting">
<Content>
some plain text
</Content>
<CssFiles>
<telerik:EditorCssFile Value="Styles.css" />
</CssFiles>
</telerik:RadEditor>
I know that there are articles that describe how to detect that the user has interacted with the RadEditor, but checking whether the content has changed is quite another task. I understand that the underlying storage method makes it almost impossible to compare, but that's why we need the control to do this internally. Even if we fall short of comparing the content, at least build-in the workarounds into the control to invoke a single "Changing" event.
Likely to happen when an element is empty, not just the editor, if you can get the cusros in an empty <p>, and press backspace you can get the same behavior, it can happen as you work on some content Steps to reproduce: 1. Go to the Editor demo page http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx in Chrome 2. CTRL+A on the editor and hit delete 3. Hit Delete or Backspace again Result: Uncaught TypeError Cannot read property 'nodeType' of undefined Appears in the console
I have an issue when I line break in RADEditor but it keeps going to the bottom of the line in Internet Explorer v11. Please note that the issue is reproducible on Telerik Demo site. Steps to reproduce the issue: Copy and paste the following content in HTML mode Some content <br /> <br /> Put the cursor in the beginning of this line, press Backspace and after that Enter <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> Switch to Design panel Press Backspace twice in front of the text "Put the cursor in the beginning of this line, press Backspace and after that Enter" Press Enter Result The content jump to the bottom of the line See the attached video for more information.
The issue is as we are deleting the entire line which contains bullets, it doesn't delete the bullets. We are using server side AcceptTrackChanges() method and it keeps the background color of the deleted lines.
ASPX
<telerik:RadEditor RenderMode="Lightweight" ID="RadEditor1" EnableTrackChanges="true" runat="server" Width="750px"
Height="400px" ToolsFile="~/ToolsFile.xml">
<TrackChangesSettings Author="RadEditorUser" CanAcceptTrackChanges="true" UserCssId="reU0"></TrackChangesSettings>
<Content>
<ol>
<li>test
<ol>
<li>test2</li>
</ol>
</li>
<li>test3</li>
</ol>
</Content>
</telerik:RadEditor>
<asp:Button Text="Get Content" OnClick="GetContent" runat="server" />
<br />
EditorWithoutTracking:<br />
<asp:TextBox runat="server" id="EditorWithoutTracking" TextMode="MultiLine" Width="1000px" Height="500px"/><br />
EditorWithTracking:<br />
<asp:TextBox runat="server" id="EditorWithTracking" TextMode="MultiLine" Width="1000px" Height="500px"/>
Codebehind
protected void GetContent(object sender, EventArgs e)
{
EditorWithoutTracking.Text = RadEditor1.Content;
RadEditor1.AcceptTrackChanges();
EditorWithTracking.Text = RadEditor1.Content;
}
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.
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
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.
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.