Currently it is not possible to set the value of a password input in the content area of RadEditor via the Design view.
When a groupbox is inserted and start typing text, the fieldset stays fixed in size.
You can use the following resolved command:
<telerik:RadEditor runat="server" ID="RadEditor1">
</telerik:RadEditor>
<script type="text/javascript">
Telerik.Web.UI.Editor.CommandList.InsertGroupbox = function myfunction(commandName, editor, args) {
var localizedTitle = editor.getLocalizedString("RadEditorGroupboxTitle", "Title");
var localizedContent = editor.getLocalizedString("RadEditorGroupboxContent", "Content...");
value = "<fieldset style='width: 200px; min-height: 76px'> <legend>" + localizedTitle + "</legend>" + localizedContent + " </fieldset> ";
editor.pasteHtml(value, commandName);
}
</script>
When you copy a table from MS Excel and you paste it in the RadEditor under Chrome, an image that depicts the copied table will be inserted in the content area of the control along with the table.
You can use the following workaround to avoid inserting an image with the table:
<telerik:RadEditor runat="server" ID="RadEditor1">
</telerik:RadEditor>
<script type="text/javascript">
var getImages = Telerik.Web.UI.Editor.ClipboardImagesProvider.prototype.getImages;
Telerik.Web.UI.Editor.ClipboardImagesProvider.prototype.getImages = function (event) {
var images = getImages.call(this, event);
debugger;
if (event.clipboardData && images.length && event.clipboardData.getData("text/html")) {
return [];
}
return images;
};
</script>
When a new line is entered (no matter which mode) the new lines does not break the text into separate words.
To workaround this problem you can use the following get_text() method with the additional replacement logic:
<telerik:RadEditor runat="server" ID="RadEditor1">
</telerik:RadEditor>
<script type="text/javascript">
Telerik.Web.UI.RadEditor.prototype.get_text = function()
{
var $T = Telerik.Web.UI;
var modeEnum = $T.EditModes;
var oContent = "";
if (this.get_mode() != modeEnum.Html)
{
var oArea = this.get_contentArea();
if (oArea)
{
if (oArea.innerText) {
oContent = oArea.innerText;
}
else {
oContent = oArea.innerHTML;
oContent = oContent.replace(/<br>/ig, "\r\n");
oContent = oContent.replace(/<\/p>/gi, "\r\n");
oContent = oContent.replace(/ /gi, "\s");
if (this.get_newLineMode() === $T.EditorNewLineModes.Div) {
oContent = oContent.replace(/<\/div>/gi, "\r\n");
}
oContent = oContent.replace(/<\/?[^>]*>/ig, "");
oContent = oContent.replace(/<!--(.|\s)*?-->/gi, "");
}
}
}
else
{
oContent = this._getTextArea().value.replace(/<\/?[^>]*>/ig, "");
}
return oContent;
};
</script>
The scenario is related to RadEditor working with content providers. When inserting an image in chrome through Image Manager, the default width and height are applied to the HTML. The behavior is observed only in Chrome browser.
When the RadEditor is used on Chrome, it is not focused and you click on the empty space in the content area or call the client-side function 'setFocus', the cursor in the content area will not appear, because the editor does not get the focus.
You can use the following workaround to avoid the problem when the editor's content is clicked:
<telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad">
</telerik:RadEditor>
<script type="text/javascript">
function OnClientLoad(editor, args) {
if ($telerik.isChrome) {
setTimeout(function () {
var body = editor.get_contentArea();
var contentElm = editor.get_contentAreaElement();
body.style.height = (contentElm.offsetHeight - 10) + "px";
}, 0);
}
}
</script>
The RadEditor's Media Manager dialog uses pasteHtml functionality to insert Object elements in the contentArea. The pasteHtml functionality do not position the cursor correctly for this case (pasted content ends with a object).
The issue can be workarounded by appending a character after the object. Then using a content filter the additional characters will be removed.
<telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad" OnClientPasteHtml="OnClientPasteHtml">
</telerik:RadEditor>
<script type="text/javascript">
function OnClientPasteHtml(editor, args) {
if ($telerik.isChrome && args.get_commandName() == "MediaManager") {
args.set_value(args.get_value() + String.fromCharCode(8203));
}
}
function OnClientLoad(editor, args) {
if ($telerik.isChrome) {
editor.get_filtersManager().add(new MyFilter());
}
}
MyFilter = function() {
MyFilter.initializeBase(this);
this.set_isDom(false);
this.set_enabled(true);
this.set_name("RadEditor filter");
this.set_description("RadEditor filter description");
}
MyFilter.prototype =
{
getHtmlContent: function(content) {
return content.replace(/(object>)[\u200b]/gm, "$1"); // or content.replace(/[\u200b]/gm, "")
},
getDesignContent: function(content) {
return content;
}
}
MyFilter.registerClass('MyFilter', Telerik.Web.UI.Editor.Filter);
</script>
The Node Inspector module is not working when inspecting form elements that are inserted via the 'Insert Form Element' command in IE11.
When the content area mode is a Div element, every ajax post back is causing a flickering of the content.
According to the WAI-ARIA specification, the Shift+Tab in Rich Text Box should focus the toolbar if the cursor is in the content area.As a side effect the Tab functionality get executed instead of Shift+Tab.
The behavior is correct in FF and IE, but not in Chrome
Possible workaround is overriding the InsertShiftTab command with this function:
<telerik:RadEditor runat="server" ID="RadEditor1">
</telerik:RadEditor>
<script type="text/javascript">
Telerik.Web.UI.Editor.CommandList.InsertShiftTab = function (commandName, editor, oTool) {
var oParent = editor.getSelectedElement();
if (typeof (oParent.tagName) == "undefined")
oParent = oParent.parentNode;
var tdNode = Telerik.Web.UI.Editor.Utils.getElementParentByTag(oParent, "TD");
if (tdNode) {
Telerik.Web.UI.Editor.Utils.MoveToPreviousCell(tdNode, editor);
}
else {
setTimeout(function () {
var toolsArray = editor.get_toolAdapter().get_tools();
var lastTool = toolsArray[toolsArray.length - 1].get_element();
if (document.activeElement !== lastTool) {
lastTool.focus();
}
}, 0);
}
return false;
};
</script>
When there is some bold text in the content and teh backspace is used to delete it, the browser crashes. The problem stems from the new implementation of the inline commands. To resolve this you can roll back to the default browser behavior as described in the following help article: http://www.telerik.com/help/aspnet-ajax/editor-inline-and-block-commands-behavior-change.html
When an Image or a Table elements are being inserted into the content of the editor, the undo command should revert the insertion.
Hi, Browser : IE11 Telerik version : 2013.3.1114.40 - Q3 2013 release Steps to reproduce the issue : 1 . Copy ordered list from MS WORD 2010 2. Paste it in RadEditor 3. View html markup in radeditor Each text within LI tag is wrapped by P tag and this issue occurs only in IE11 browser. Ideally ,p tags should be stripped off. Looking forward to your response. Thanks in advance, Anthony
When the commands "Insert Date", "Insert Time" and "Insert Symbol" are used, the content that is inserted via these commands is not cleared upon clicking Undo.
Such feature will be a convenient availability for developers to create document templates and easy add HTML specified headers and footers
The following commands does not work with the Format Painter tool. 1. underline 2. strikethrough 3. back color 4. fore color 5. bold
Since document.selection is no longer supported in IE11 all occurrences in the code of RadEditor need to be updated accordingly.
The FormatPainter command is not applying Bold, Italic and Underline formatting to the content in Firefox. In Internet Explorer only underline is not applied.
Setting a content as the following one:
<html>
<head>
</head>
<body>
<h2>content</h2>
</body>
</html>
After switching the editor mode and creating a post back, a JavaScript error is thrown in the browser console.
A possible resolution is overriding the detachEvents methods of the editor with the provided ones. You can use the following setup as example, note that the script tag should be after the RadEditor declaration to override the methods correctly:
<telerik:RadEditor runat="server" ID="RadEditor1" ContentFilters="none">
<Content>
<html>
<head>
</head>
<body>
<h2>content</h2>
</body>
</html>
</Content>
</telerik:RadEditor>
<asp:Button Text="text" runat="server" OnClick="Unnamed_Click" />
<script type="text/javascript">
Telerik.Web.UI.Editor.NodesTracker.prototype.detachEvents = function () {
if (!this.isActive) return;
var contentArea = this.editor.get_contentArea();
this.editor.remove_submit(this.cleanUpDelegate);
try {
$telerik.removeHandler(contentArea, "keyup", this.keyupDelegate);
$telerik.removeHandler(contentArea, "keydown", this.keydownDelegate);
}
catch (ex) { }
$telerik.removeExternalHandler(contentArea, "paste", this.pasteDelegate);
}
Telerik.Web.UI.Editor.EmptyWhitespaceCharTracker.prototype.detachEvents = function () {
var contentArea = this.editor.get_contentArea();
this.editor.remove_submit(this.cleanUpDelegate);
try {
$telerik.removeHandler(contentArea, "keypress", this.cleanUpDelegate);
}
catch (ex) { }
$telerik.removeExternalHandler(contentArea, "mousedown", this.cleanUpDelegate);
$telerik.removeExternalHandler(contentArea, "touchstart", this.cleanUpDelegate);
}
</script>