In Q2 2013 the block commands in RadEditor were greatly improved to match desktop editors closely. This means that now block elements like <p> or <div> are required for operations like creating lists, indent/outdent commands. The default value for the NewLineMode property of the control is BR for historical reasons and thus when the end users press enter they do no longer create elements the block commands can work with. Changing it would be a breaking change, however. Here is a list with possible implications of changing the default NewLineMode value to P: Pros: - The default text editing in modern browsers according to HTML5 specifications (https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html#the-insertparagraph-command) requires that a paragraph is inserted when enter is pressed - The content generated by the end users by default will integrate better with the improved commands of the control - Most desktop rich text editing applications (like MS Word) insert a paragraph when enter is pressed Cons: - A breaking change in the current control behavior and configuration - When paragraphs are inserted they will add more margins so the final appearance of the content and the editing process will require more height - By default, the underlying rich-text editing engine of Firefox uses BR tags and Chrome's - DIV tags Please use the buttons on the right to vote whether this change should be implemented. If you have anything to add - the comments below can be used.
Such a scenario is reproducible when RadEditor is used in Template container and the control is AJAX-enabled. For example, in an EditTemplate or InsertTemplate.
To workaround this bug, you need to assure that the base CSS resource is loaded before RadEditor. To do so, add manually the resource in the head element of the page:
<head runat="server">
<title></title>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadEditor), "Telerik.Web.UI.Skins.EditorLite.css") %>'
rel="stylesheet" type="text/css" />
</telerik:RadCodeBlock>
</head>
Trying to operate with images in RadEditor under IE11 leads to unresponsiveness. For example, using the paragraph style, selecting an image and switching to HTML and Design mode, etc. You can workaround that by forcing the compatibility mode of the IE to IE8: <meta http-equiv="X-UA-Compatible" content="IE=8" />
Update:
For securing the RadEditor content and preventing XSS attacks we advise enabling the RemoveScripts, EncodeScripts, StripCssExpressions and StripDomEventAttributes content filters to sanitize the content. For more information please check the following help article and blog post on the matter:
Original message:
It is possible to conduct a successful XSS attack by injecting a specific malicious content in the RadEditor content. This attack targets Internet explorer browsers. It takes advantage of a security vulnerability related to the CSS expression rule in Legacy IE browsers, where arbitrary JavaScript code embedded in the style attribute of a DOM element can be run on the page. There is a workaround that is strongly recommended to be used in order to make such attack attempts unsuccessful. The idea is to strip the expression declaration from the style attribute value of DOM elements in the RadEditor Content. Following is a sample implementation Usage: protected void Page_Load(object sender, EventArgs e) { var sanitizer = new CssExpressionSanitizer(); theEditor.Content = sanitizer.Sanitize(theEditor.Content); } Content of the CssExpressionSanitizer class: public class CssExpressionSanitizer { private static readonly Regex expressionPattern = new Regex(@"<[a-zA-Z0-9]+[^>]*?style=['""]?.*?(?<cssRule>[^;""]+: expression(?<bracket>\())", RegexOptions.Compiled); public string Sanitize(string input) { var matches = expressionPattern.Matches(input); for (int i = matches.Count - 1; i >= 0; i--) { input = SanitizeExpression(input, matches[i]); } return input; } private string SanitizeExpression(string input, Match m) { var cssRuleIndex = m.Groups["cssRule"].Index; var expressionIndex = m.Groups["bracket"].Index; input = StripMatchingBracketsWithContent(input, expressionIndex); input = input.Remove(cssRuleIndex, expressionIndex - cssRuleIndex); if (input[cssRuleIndex] == ';') { input = input.Remove(cssRuleIndex, 1); } return input; } private string StripMatchingBracketsWithContent(string input, int startIndex) { var openBrackets = 0; do { char currentChar = input[startIndex]; if (currentChar == '"' || currentChar == '\'' || currentChar == '/') { //strip within quotation marks making sure brackets appearing in string constructs do not interfere with the counting var parser = new InPairStringParser(currentChar); input = parser.Sanitize(input, startIndex); currentChar = input[startIndex]; } input = input.Remove(startIndex, 1); if (currentChar == '(') openBrackets++; else if (currentChar == ')') openBrackets--; } while (openBrackets > 0 && input.Length > startIndex); return input; } public class InPairStringParser { public InPairStringParser(char pairChar) { this.pattern = new Regex(String.Format("{0}.*?(?<!\\\\){0}", pairChar)); } public string Sanitize(string input, int startIndex) { var subinput = input.Substring(startIndex); return input.Substring(0, startIndex) + pattern.Replace(subinput, "", 1); } private readonly Regex pattern; } }
As the selection changes when typing inside textbox, JavaScript errors are being thrown.
If some textarea elements are added inside the content area, focusing and typing text inside is almost impossible. There are also cases, where the text overrides the element on typing. Additionally, any text input elements are difficult to be selected. It is required to click multiple times so to appear selected.
The behavior of Paste tools should be the same as in Firefox, Chrome, etc., where the clipboard access is also forbidden.
For example, checkboxes with plain text as labels before them do not appear selected in RadEditor:
HTML:
Checkbox: <input type="checkbox" />
Web page hangs with long running script error when the Foreground color of table content is cleared in IE11.
Steps to reproduce:
1. In IE 11 Go to editor demo http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx
2. Click HTML view and delete everything
3. Copy this into editor
<html>
<head>
<title></title>
</head>
<body>
<table>
<tbody>
<tr>
<td style="color: #000000;">Lorem ipsum</td>
</tr>
</tbody>
</table>
</body>
</html>
4. Go to design mode highlight some text and click on the "Foreground color" button, select the clear choice (upper left)
5. Web page hangs with long running script error. (It has something to do with that style on the TD)
Entering two consecutive spaces in the middle of a paragraph causes the cursor to jump to the end of the paragraph. The issue is reproducible with version 2015.1.401 (and not reproducible with Q3 2014) Steps to reproduce: 1. Open the following url in IE11, setting the compatibility mode to IE8 (or in real IE8) 2. Type in a short sentence into the Editor 3. Place the cursor in the middle sentence and hit the space bar (or other char inserting button) twice Result: The cursor will jumps to the end of the sentence.
Due to this behavior the font name applied is getting cleared when switching to HTML mode.
The Rad Editor control removes unformatted spaces between differently-formatted words when the user presses Enter key for the first time in IE
Steps to reproduce:
1. Go to http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx and clear all the pre-existing text.
2. In the empty editing area, type two words separated by a space.
3. Select the first word but not the space after it, and apply either italics, boldness, or underlining.
4. Select the second word but not the space before it, and apply a different one of those formatting options.
5. Position the cursor at the end of the line, and press Enter
Result: The space between the words will vanish. Firefox users will see underlining indicating that the browser considers the new, merged word to be misspelled.
The following commands does not work with the Format Painter tool. 1. underline 2. strikethrough 3. back color 4. fore color 5. bold
When this is happening the editor is unavailable for editing and the button for disabling this mode is also unavailable.
A possible resolution is to use the Form Template option of the EditFormSettings property and set a RadEditor control with the following function attached to the OnClientCommandExecuted event:
function OnClientCommandExecuted(editor, args) {
var commandName = args.get_commandName();
if (commandName === "ToggleScreenMode") {
var isFullScreen = editor.isFullScreen();
var modalExtender = $telerik.$("#modalDivId_<%= RadGrid1.ClientID %>");
if (isFullScreen)
modalExtender.hide();
else
modalExtender.show();
}
}
Also, this happens with simple DOM elements set with fixed position. The following workaround fixes the Full Screen of the RadEditor control in all similar cases when elements are overlaying.
<telerik:RadEditor runat="server" ID="RE1" OnClientCommandExecuted="OnClientCommandExecuted">
</telerik:RadEditor>
<script type="text/javascript">
function OnClientCommandExecuted(editor, args) {
if (args.get_commandName() === "ToggleScreenMode") {
var editorElement = editor.get_element();
if (editor.isFullScreen()) {
editorElement.style.position = "absolute";
editorElement.style.zIndex = "100000";
} else {
editorElement.style.position = "";
editorElement.style.zIndex = "";
}
}
}
</script>
When the Toggle Full Screen is pressed the RadEditor does not fill the entire page.
If the content contains html, head and body tags (Full HTML editing), and switching to Design mode causes a slightly slower rendering. If the same HTML is used directly in the, the design mode renders as expected.
When RadEditor is disabled from the client-side (enableEditing and set_editable are set to false) the user is still allowed to indent the content using the Tab key in Internet Explorer.
Workaround:
<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1">
<Tabs>
<telerik:RadTab Text="tab1" Selected="true"></telerik:RadTab>
<telerik:RadTab Text="tab2"></telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server">
<telerik:RadPageView ID="RadPageView1" runat="server" Selected="true">RadPageView 1</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView2" runat="server">
<telerik:RadEditor ID="RadEditor1" runat="server" EnableTrackChanges="true"
TrackChangesSettings-CanAcceptTrackChanges="true" ToolsFile="ToolsTrackChanges.xml">
<Content>
<p>paragraph 1</p>
<p>paragraph 2</p>
</Content>
</telerik:RadEditor>
</telerik:RadPageView>
</telerik:RadMultiPage>
<script type="text/javascript">
$telerik.$.extend(Telerik.Web.UI.RadEditor.prototype, {
_initEvents: function() {
var editor = this;
if (editor.__original__initEvents) {
editor.__original__initEvents();
}
editor.add_domChange(Function.createDelegate(editor, editor._domChangedHandler));
editor.attachInternalHandler("keypress", Function.createDelegate(editor, editor._keyPressHandler));
editor.attachInternalHandler("keydown", Function.createDelegate(editor, editor._keyDownHandlerEnableTrackChangesOverride));
editor.attachInternalHandler("keydown", Function.createDelegate(editor, editor._keyDownHandler));
}
});
</script>
When using the built-in AJAX Spell Checker of the Editor, on the first misspelled word the corresponding popup opens. When the user finishes with the first word, the same popup should open for the following word, but under IE11 this does not happen and the user is forced to click on the word for the dialog to open. To resolve this you can force the IE11 browser to IE10 compatibility mode with a meta tag in the head element pf the page <meta http-equiv="X-UA-Compatible" content="IE=10" />