I have a Telerik RadEditor (2017.3) control with custom/unembedded skin (created using the themebuilder on telerik), and when I enter a value for the DialogsCssFile attribute, the markup of the page changes, meaning that my custom skin is not applied to the editor anymore. Why is this a problem? Well the css inside the dialog for Find/replace for example didn't display correct, and having done some research, I needed to do some @imports into a customDialog.css file and drop that into the DialogsCssFile attribute. As soon as I do this, the generated markup in the page for RadEditor changes from Radeditor RadEditor_MyCustomSkin reWrapper to Radeditor MyCustomSkin reWrapper meaning that my radeditor Skin is not applied to the editor, If I remove the DialogCssFile then the editor skin loads correctly, but the dialogs look wrong. In the Page source, the Window is a div within the page, and not an iFrame Code : Page CSS files (in order) <link type="text/css" rel="stylesheet" href="/assets/css/MyCustomSkin/formdecorator.MyCustomSkin.css" /> <link type="text/css" rel="stylesheet" href="/assets/css/MyCustomSkin/toolbar.MyCustomSkin.css" /> <link type="text/css" rel="stylesheet" href="/assets/css/MyCustomSkin/window.MyCustomSkin.css" /> <link type="text/css" rel="stylesheet" href="/assets/css/MyCustomSkin/combobox.MyCustomSkin.css" /> <link type="text/css" rel="stylesheet" href="/assets/css/MyCustomSkin/dropdownlist.MyCustomSkin.css" /> <link type="text/css" rel="stylesheet" href="/assets/css/MyCustomSkin/tabstrip.MyCustomSkin.css" /> <link type="text/css" rel="stylesheet" href="/assets/css/MyCustomSkin/editor.MyCustomSkin.css" /> Main Radeditor Class (to give idea of class names) .RadEditor_MyCustomSkin { /* css styles - all generated automatically */ } Control : <telerik:RadEditor runat="server" ID="pageRadEdit" ToolbarMode="Default" EditModes="Design,Html" DialogsCssFile="~/assets/css/MyCustomSkin/DialogHandler.MyCustomSkin.css" ToolsFile="~/App_Data/Editor.xml" Width="980px" Height="800px" EnableResize="false" OnClientLoad="resizeMe" NewLineMode="P" OnClientSelectionChange="$page.setdirty" ContentFilters="DefaultFilters,ConvertFontToSpan,IECleanAnchors,OptimizeSpans,MozEmStrong,FixEnclosingP" EnableEmbeddedSkins="false"> <SpellCheckSettings DictionaryLanguage="en-GB" AllowAddCustom="false" /> <Languages> <telerik:SpellCheckerLanguage Code="en-GB" Title="English (UK)" /> </Languages> </telerik:RadEditor> DialogHandler.MyCustomSkin.css @import url('FormDecorator.MyCustomSkin.css'); /*@import url('Grid.MyCustomSkin.css');*/ @import url('Input.MyCustomSkin.css'); @import url('Splitter.MyCustomSkin.css'); @import url('TabStrip.MyCustomSkin.css'); @import url('ToolBar.MyCustomSkin.css'); /*@import url('Upload.MyCustomSkin.css');*/ @import url('Window.MyCustomSkin.css'); @import url('ComboBox.MyCustomSkin.css'); @import url('Button.MyCustomSkin.css'); /*@import url('Editor.MyCustomSkin.css');*/ Note : Editor css is still using wrong class even if the bottom import is uncommented Web.Config settings <add key="Telerik.Skin" value="MyCustomSkin" /> <add key="Telerik.ScriptManager.TelerikCdn" value="Disabled" /> <add key="Telerik.StyleSheetManager.TelerikCdn" value="Disabled" /> <add key="Telerik.Web.UI.RenderMode" value="lightweight" /> <add key="Telerik.Web.UI.EnableEmbeddedSkins" value="false" /> <add key="Telerik.EnableEmbeddedSkins" value="false" />
Based on customer feedback: 1) Toggle full screen 2) Finish AJAX spell checker 3) Then full screen icon is not selected even the editor is in full screen mode
When text in the Editor has Track Changes then :
The problem happens when enter a period . , single ' or " double quote on a new line.
Can be reproduced with the code below: <telerik:RadEditor runat="server" ID="RadEditor1" > <Content> Here is sample content! </Content> </telerik:RadEditor> <input type="button" value="Set Focus On RadEditor" onclick="SetFocusOnRadEditor(); return false;" /> <script type="text/javascript"> function SetFocusOnRadEditor() { var editor = $find("<%=RadEditor1.ClientID%>"); //get a reference to RadEditor client object editor.setFocus(); //set the focus on the the editor } </script> The problem is not reproducible when the ContentAreaMode is set to DIV or in the other browsers. Workaround <telerik:RadEditor runat="server" ID="RadEditor1"> <Content> Here is sample content! </Content> </telerik:RadEditor> <button type="button" onclick="SetFocusOnRadEditor()">Focuse On RadEditor</button> <script type="text/javascript"> function SetFocusOnRadEditor() { var editor = $find("<%=RadEditor1.ClientID%>"); if ($telerik.isChrome) { var iframe = editor.get_contentAreaElement(); iframe.contentWindow.document.body.focus(); } else { editor.setFocus(); } } </script>
<
telerik:RadEditor
runat
=
"server"
ID
=
"RadEditor1"
ToolbarMode
=
"Floating"
></
telerik:RadEditor
>
<
telerik:RadEditor
runat
=
"server"
ID
=
"RadEditor2"
ToolProviderID
=
"RadEditor1"
ToolbarMode
=
"Floating"
></
telerik:RadEditor
>
<
telerik:RadEditor
runat
=
"server"
ID
=
"RadEditor3"
ToolProviderID
=
"RadEditor1"
ToolbarMode
=
"Floating"
> </
telerik:RadEditor
>
Problem: In the RadEditor we have the NewLineMode set to Div We are also using a ToolsFile xml document to control the tools available in RadEditor. The problem is the InsertParagraph tool now inserts <div> tags instead of <p> tags. We want to keep the NewLineMode behavior as DIV while still having a tool that can insert a paragraph (i.e. a <p> tag). To replicate this problem: On the RadEditor demo page, first set "NEW LINES AS" to "Divs". Then, in the editor content area just above the "Destinations" table, Type in three lines: Comment1 Comment2 Comment3 If you then toggle to the HTML tab, you will see that the Comment1 line is (incorrectly) bracketed by a <p> tag while the Comment2 and Comment3 lines are (correctly) bracketed by <div> tags. Next, go back to the Design tab and position yourself at the beginning of the Comment3 line then click the [Insert Paragraph] button. In the newly inserted "paragraph" type "Comment2b". If you then toggle to the HTML tab you will see that Comment2b is incorrectly bracketed by a <div> tag. It should be a <p> tag.
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
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>
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?