Hi! We've recently run into an issue with the radeditor which seems to correspond to around the time we upgraded our Telerik asp.net/ajax controls from 2011 Q2 to 2011 Q3.
On our page we have a radeditor which utilizes the code below provided by Telerik to show the word 'Comments' in the radeditor until the user clicks in the radeditor, upon which the word 'Comments' disappears.
This previously worked fine with no issues. However since upgrading the controls, no matter what other field (e.g., textbox, radiobuttons, etc) a user clicks on once a page loads, the cursor always ends up inside the radeditor and requires the user to have to click again in order to set the focus back on the original field clicked. This has become very frustrating for our users.
A secondary, much less important issue noticed is the word 'Comments' no longer reappears if a user clicks outside the radeditor without entering any text, etc,; whereas previously if a user clicked in the radeditor, the word 'Comments' would disappear, and if the user left the radeditor blank then when they clicked elsewhere on the page the word 'Comments' would re-appear.
These issues are experienced on multiple different pages where we've utilized this functionality, suggesting whatever has caused the issue isn't the result of something on the individual pages themselves. It also happens regardless of which browser is used to access our site (i.e., Firefox, Chrome, IE).
Any ideas or thoughts?
Thanks!
On our page we have a radeditor which utilizes the code below provided by Telerik to show the word 'Comments' in the radeditor until the user clicks in the radeditor, upon which the word 'Comments' disappears.
var defaultContent = "Comments"; function OnEditorLoad(editor, args) { editor.set_html(defaultContent); var EditorElement = document.all ? editor.get_document().body : editor.get_document(); $telerik.addExternalHandler(EditorElement, "click", function (e) { if (editor.get_html(true).trim() == defaultContent) { editor.set_html(""); } }); $telerik.addExternalHandler(EditorElement, "blur", function (e) { if (editor.get_html(true).trim() == "") { editor.set_html(defaultContent); } }); } ---------------------------------------------------------------------------------------------------<telerik:RadEditor ID="reComments" runat="server" Skin="Windows7" Width="94.7%" Height="150px" ToolsFile="~/Content/Tools_NoToolbar.xml" ToolTip="Enter Comments" ContentAreaCssFile="~/Content/cssRadEditorWhiteContent.css" OnClientLoad="OnEditorLoad" ToolbarMode="Default" EditModes="Design" StripFormattingOptions="MSWordRemoveAll" ContentAreaMode="Div"> <CssFiles> <telerik:EditorCssFile Value="~/Content/cssRadEditorWhiteContent.css" /> </CssFiles></telerik:RadEditor>This previously worked fine with no issues. However since upgrading the controls, no matter what other field (e.g., textbox, radiobuttons, etc) a user clicks on once a page loads, the cursor always ends up inside the radeditor and requires the user to have to click again in order to set the focus back on the original field clicked. This has become very frustrating for our users.
A secondary, much less important issue noticed is the word 'Comments' no longer reappears if a user clicks outside the radeditor without entering any text, etc,; whereas previously if a user clicked in the radeditor, the word 'Comments' would disappear, and if the user left the radeditor blank then when they clicked elsewhere on the page the word 'Comments' would re-appear.
These issues are experienced on multiple different pages where we've utilized this functionality, suggesting whatever has caused the issue isn't the result of something on the individual pages themselves. It also happens regardless of which browser is used to access our site (i.e., Firefox, Chrome, IE).
Any ideas or thoughts?
Thanks!
1 Answer, 1 is accepted
0
Hi Amy,
Could you please try the following modified JavaScript to achieve the required functionality:
The problem that you experience is due to the fact that the editor is configured to use editable <div> for its content area (ContentAreaMode="Div"), and the code that you are using is attaching event handlers to the document's <body>, which is in fact the <body> element of the page and not the editor's content area.
Also, in the provided RadEditor's configuration, you are using ContentAreaCssFile and CssFiles properties which are not compatible with ContentAreaMode="Div" and they will not be applied. Is there any particular reason that you have set ContentAreaMode to Div?
All the best,
Dobromir
the Telerik team
Could you please try the following modified JavaScript to achieve the required functionality:
var defaultContent = "Comments";function OnEditorLoad(editor, args){ editor.set_html(defaultContent); var EditorElement = editor.get_contentArea(); $telerik.addExternalHandler(EditorElement, "click", function (e) { if (editor.get_html(true).trim() == defaultContent) { editor.set_html(""); } }); $telerik.addExternalHandler(EditorElement, "blur", function (e) { if (editor.get_html(true).trim() == "") { editor.set_html(defaultContent); } });} The problem that you experience is due to the fact that the editor is configured to use editable <div> for its content area (ContentAreaMode="Div"), and the code that you are using is attaching event handlers to the document's <body>, which is in fact the <body> element of the page and not the editor's content area.
Also, in the provided RadEditor's configuration, you are using ContentAreaCssFile and CssFiles properties which are not compatible with ContentAreaMode="Div" and they will not be applied. Is there any particular reason that you have set ContentAreaMode to Div?
All the best,
Dobromir
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now