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.
In RadEditor with Ribbon Bar Toolbar, there are two different types of drop-down control observed.
Type1 includes "Paste" and "Strip All Formatting"
Type2 includes "Font Name", "Real font size", "Foreground Color", "Background Color", "Apply CSS Class", "Paragraph Style" and "Undo"
Issue1:
In RadEditor with Ribbon Bar Toolbar When "Type 1" Dropdown is opened or expanded and we click on any "Type 2" Dropdown then "Type 1" dropdown is still remain open or expand.
Issue2:
vice versa In RadEditor with Ribbon Bar Toolbar When "Type 2" Dropdown is opened or expanded and we click on any "Type 1" Dropdown then "Type 1" dropdown is still remain open or expand.
When EnableComments is set to true, the content from the clipboard is pasted twice in an empty editor. RadEditor Configuration:Potential workaround:<telerik:RadEditorrunat="server"EnableComments="true"><Tools><telerik:EditorToolGroup><telerik:EditorToolName="Bold"/><telerik:EditorToolName="Italic"/><telerik:EditorToolName="Underline"/><telerik:EditorSeparator/><telerik:EditorToolName="Undo"/><telerik:EditorToolName="Redo"/><telerik:EditorToolName="Cut"/><telerik:EditorToolName="Copy"/><telerik:EditorToolName="Paste"/><telerik:EditorToolName="PastePlainText"Text="Paste Plain Text"/><telerik:EditorToolName="FindAndReplace"Text="Find and Replace"/><telerik:EditorSeparator/><telerik:EditorToolName="Indent"/><telerik:EditorToolName="Outdent"/><telerik:EditorToolName="InsertOrderedList"Text="Numbered List"/><telerik:EditorToolName="InsertUnorderedList"Text="Bulleted List"/><telerik:EditorToolName="LinkManager"/><telerik:EditorToolName="Unlink"/><telerik:EditorSeparator/><telerik:EditorToolName="AjaxSpellCheck"Text="Spell Check"/><telerik:EditorToolName="InsertSymbol"Text="Insert Symbol"/></telerik:EditorToolGroup><telerik:EditorToolGroup><telerik:EditorToolName="AcceptTrackChange"Text="Accept Change"/><telerik:EditorToolName="RejectTrackChange"Text="Reject Change"/><telerik:EditorToolName="AcceptAllTrackChanges"Text="Accept All Changes"/><telerik:EditorToolName="RejectAllTrackChanges"Text="Reject All Changes"/><telerik:EditorToolName="EnableTrackChangesOverride"Text="Track Changes"/><telerik:EditorToolName="AddComment"Text="Add Comment"/><telerik:EditorToolName="RemoveComment"Text="Remove Comment"/><telerik:EditorToolName="RemoveAllComments"Text="Remove All Comments"/><telerik:EditorToolName="ImageManager"Text="Insert Image"/></telerik:EditorToolGroup></Tools></telerik:RadEditor><script type="text/javascript">functionOnClientPasteHtml(sender, args) {varcommandName = args.get_commandName();varvalue = args.get_value();if(commandName =="Paste"&& Telerik.Web.Browser.ie) {args.set_value(value);args.set_cancel(true);}}</script><telerik:RadEditor runat="server"Height="300px"StripFormattingOptions="Span,Font,Css"EnableTrackChanges="true"OnClientPasteHtml="OnClientPasteHtml"ContentFilters="FixEnclosingP,RemoveScripts,FixUlBoldItalic,IECleanAnchors,MozEmStrong,ConvertFontToSpan,ConvertToXhtml,IndentHTMLContent,EncodeScripts,OptimizeSpans,ConvertTags,StripCssExpressions,RemoveExtraBreaks"EnableComments="true"NewLineMode="P"EditModes="Design,Html"></telerik:RadEditor>
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
Hi,
As per title and I also find out it able to reproduce in the demo site: https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx
Step:
1. Change to 'HTML' mode.
2. Open 'Find And Replace' dialog.
3. Enter a word to find and hit the 'Find' button.
Notice that the word does not get highlighted. It only happens in 'HTML' mode, 'Design' mode working fine.
Please help as this feature is very useful in my project.
Thank you.
If RadEditor is initially hidden with display:none, its tools do not work when displayed in Firefox 62.0:
<div style="display: none" id="hiddenWrapper">
<telerik:RadEditor ID="RadEditor1" runat="server"></telerik:RadEditor>
</div>
<script>
function f() {
$get('hiddenWrapper').style.display = "block";
}
Sys.Application.add_load(f);
</script>
There is a warning error in the console: "Mutation Events is deprecated and to use MutationObserver".
The fix is to call the $find("RadEditor1").onParentNodeChanged(); method to recreate the content area:
<div style="display: none" id="hiddenWrapper">
<telerik:RadEditor ID="RadEditor1" runat="server"></telerik:RadEditor>
</div>
<script>
function f() {
$get('hiddenWrapper').style.display = "block";
$find("RadEditor1").onParentNodeChanged();
}
Sys.Application.add_load(f);
</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
Steps to reproduce: 1. Go to the Editor demo page in Chrome 2. CTRL+A on the editor and hit delete 3. Hit Delete or Backspace again Result: Uncaught TypeError Appears in the console
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;
}
When the tracking feature is enabled some of the existing features don't work properly. For eg: a. If existing text were bulleted they were not displayed properly. b. If bulleted content was copied over from a web page and pasted into the RadEditor control formatting was not retained. c. If text in the editor that was modified previously and not accepted by a user, a change made to the same text after some time does not capture the new username and date time stamp by the same /different user. Please fix the tracking feature for SharePoint
Color items should persist the Title property/attribute so that when hovered, the text to be shown in the tool.