John Billiris (JSBBS)
Top achievements
Rank 1
Rank 1
John Billiris (JSBBS)
asked on 05 Dec 2007, 11:44 PM
This is more a feature request than an issue...
Is it possible to introduce a MaxLength property to limit the number of characters that is permissible in the RadEditor?
Is it possible to introduce a MaxLength property to limit the number of characters that is permissible in the RadEditor?
8 Answers, 1 is accepted
0
Hello,
Thank you for your feature request. We logged it and we will consider its implementation.
Currently, you can review the following help article which provides guidance how to restrict the HTML content added in the editor: get_Html.
Best regards,
Rumen
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Thank you for your feature request. We logged it and we will consider its implementation.
Currently, you can review the following help article which provides guidance how to restrict the HTML content added in the editor: get_Html.
Best regards,
Rumen
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
0
John Billiris (JSBBS)
Top achievements
Rank 1
Rank 1
answered on 04 Feb 2008, 01:06 AM
Thanks Rumen,
However, when I enter text in and then swap over to the HTML editor and wrap the text in <html></html> tags, then swap back to the rich text editor, the events NO LONGER fire !!!
So, I can't provide interactive feedback on the browser.
Are you able to reproduce this ?
However, when I enter text in and then swap over to the HTML editor and wrap the text in <html></html> tags, then swap back to the rich text editor, the events NO LONGER fire !!!
So, I can't provide interactive feedback on the browser.
Are you able to reproduce this ?
0
Hello jsbbs,
When you switch to the HTML mode and wrap the text in <html></html> tags, then the editor switches its Rich Text Editing engine to work in Full HTML editing mode and reattaches again its eventhandlers. Thus you should reattach the custom onkeydown event again. Here is a sample code that will help you to see when the editor is switched to Design mode from Preview or Html modes:
editor.add_modeChange(function(sender, args)
{
var mode = sender.get_mode();
if (mode == 1)
{
editor.attachEventHandler("onkeydown", functionName);
}
});
Best regards,
Rumen
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
When you switch to the HTML mode and wrap the text in <html></html> tags, then the editor switches its Rich Text Editing engine to work in Full HTML editing mode and reattaches again its eventhandlers. Thus you should reattach the custom onkeydown event again. Here is a sample code that will help you to see when the editor is switched to Design mode from Preview or Html modes:
editor.add_modeChange(function(sender, args)
{
var mode = sender.get_mode();
if (mode == 1)
{
editor.attachEventHandler("onkeydown", functionName);
}
});
Best regards,
Rumen
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
0
John Billiris (JSBBS)
Top achievements
Rank 1
Rank 1
answered on 05 Feb 2008, 02:23 AM
Rumen,
Thanks, but ...
1) the events are still not firing while I'm in HTML mode. I've even changed the javascript to check for mode == 2.
2) the length of the string when I call get_Html() is different between the normal mode and HTML mode (it deviates more with the more text entered). My objective is to limit the number of characters entered irrespective of the edit mode the user chooses. Nevertheless, the length of the HTML shouldn't change when swapping between modes!
FYI: I just checked my version of Telerik.Web.UI.dll; it is 2007.2.1107.0.
Thanks, but ...
1) the events are still not firing while I'm in HTML mode. I've even changed the javascript to check for mode == 2.
2) the length of the string when I call get_Html() is different between the normal mode and HTML mode (it deviates more with the more text entered). My objective is to limit the number of characters entered irrespective of the edit mode the user chooses. Nevertheless, the length of the HTML shouldn't change when swapping between modes!
FYI: I just checked my version of Telerik.Web.UI.dll; it is 2007.2.1107.0.
0
Hi,
The content area of Html mode is a textbox. Here is an example how to get a reference to this textarea and attach eventhandlers to it:
var textarea = rtfEditor._getTextArea();
if(window.attachEvent)
{
textarea.attachEvent("onkeydown", LimitLength);
textarea.attachEvent("onpaste", LimitLength);
textarea.attachEvent("onblur", LimitLength);
}
else
{
textarea.addEventListener("keyup",LimitLength, true);
textarea.addEventListener("paste", LimitLength, true);
textarea.addEventListener("blur", LimitLength, true);
}
Here is a sample example:
<span id="counter" style="border: 1px solid red;text-align: right;">Characters left:</span>
<telerik:RadEditor ID="RadEditor" runat="server" OnClientLoad="OnClientLoad">
</telerik:RadEditor>
<script type="text/javascript">
var limitNum = 250;
var message = 'You are not able to type more than ' + limitNum + ' characters!';
var counter = $get('counter');
function LimitLength(mode)
{
var rtfEditor = $find("<%=RadEditor.ClientID %>");
if (mode == 2){
var oValue = rtfEditor._getTextArea().innerHTML.trim().length;
}
else{var oValue = rtfEditor.get_Html(true).trim();}
if (oValue.length >= limitNum)
{
rtfEditor.set_Html(oValue.substring(0, limitNum - 1));
alert(message);
}
counter.innerHTML = "Characters left: " + ( limitNum - oValue.length );
}
function AttachHandlers(mode)
{
var rtfEditor = $find("<%=RadEditor.ClientID %>");
if(mode==1)
{
rtfEditor.attachEventHandler("onkeyup", LimitLength);
rtfEditor.attachEventHandler("onpaste", LimitLength);
rtfEditor.attachEventHandler("onblur", LimitLength);
}
else
{
var textarea = rtfEditor._getTextArea();
if(window.attachEvent)
{
textarea.attachEvent("onkeydown", LimitLength);
textarea.attachEvent("onpaste", LimitLength);
textarea.attachEvent("onblur", LimitLength);
}
else
{
textarea.addEventListener("keyup",LimitLength, true);
textarea.addEventListener("paste", LimitLength, true);
textarea.addEventListener("blur", LimitLength, true);
}
}
}
function OnClientLoad(editor, args)
{
rtfEditor = editor;
AttachHandlers(1);
LimitLength(1);
editor.add_modeChange(function(sender, args)
{
var mode = sender.get_mode();
if (mode == 1 || mode == 2)
{
AttachHandlers(mode);
LimitLength(mode);
}
});
}
</script>
Best regards,
Rumen
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
The content area of Html mode is a textbox. Here is an example how to get a reference to this textarea and attach eventhandlers to it:
var textarea = rtfEditor._getTextArea();
if(window.attachEvent)
{
textarea.attachEvent("onkeydown", LimitLength);
textarea.attachEvent("onpaste", LimitLength);
textarea.attachEvent("onblur", LimitLength);
}
else
{
textarea.addEventListener("keyup",LimitLength, true);
textarea.addEventListener("paste", LimitLength, true);
textarea.addEventListener("blur", LimitLength, true);
}
Here is a sample example:
<span id="counter" style="border: 1px solid red;text-align: right;">Characters left:</span>
<telerik:RadEditor ID="RadEditor" runat="server" OnClientLoad="OnClientLoad">
</telerik:RadEditor>
<script type="text/javascript">
var limitNum = 250;
var message = 'You are not able to type more than ' + limitNum + ' characters!';
var counter = $get('counter');
function LimitLength(mode)
{
var rtfEditor = $find("<%=RadEditor.ClientID %>");
if (mode == 2){
var oValue = rtfEditor._getTextArea().innerHTML.trim().length;
}
else{var oValue = rtfEditor.get_Html(true).trim();}
if (oValue.length >= limitNum)
{
rtfEditor.set_Html(oValue.substring(0, limitNum - 1));
alert(message);
}
counter.innerHTML = "Characters left: " + ( limitNum - oValue.length );
}
function AttachHandlers(mode)
{
var rtfEditor = $find("<%=RadEditor.ClientID %>");
if(mode==1)
{
rtfEditor.attachEventHandler("onkeyup", LimitLength);
rtfEditor.attachEventHandler("onpaste", LimitLength);
rtfEditor.attachEventHandler("onblur", LimitLength);
}
else
{
var textarea = rtfEditor._getTextArea();
if(window.attachEvent)
{
textarea.attachEvent("onkeydown", LimitLength);
textarea.attachEvent("onpaste", LimitLength);
textarea.attachEvent("onblur", LimitLength);
}
else
{
textarea.addEventListener("keyup",LimitLength, true);
textarea.addEventListener("paste", LimitLength, true);
textarea.addEventListener("blur", LimitLength, true);
}
}
}
function OnClientLoad(editor, args)
{
rtfEditor = editor;
AttachHandlers(1);
LimitLength(1);
editor.add_modeChange(function(sender, args)
{
var mode = sender.get_mode();
if (mode == 1 || mode == 2)
{
AttachHandlers(mode);
LimitLength(mode);
}
});
}
</script>
Best regards,
Rumen
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
0
Hessner
Top achievements
Rank 2
Rank 2
answered on 03 Aug 2008, 06:01 PM
Hi, Rumen
Do you have the updated javascript, for the latest version of r.a.d.editor AJAX?
Have tried the script listed, with no success.
Nice clientside solution, btw.
The reason for me trying to use this code is that it seems that my validator no longer work (with the latest AJAX version:)
Even with 1-2 characters it will fire.
Regards,
Bo Hessner
Do you have the updated javascript, for the latest version of r.a.d.editor AJAX?
Have tried the script listed, with no success.
Nice clientside solution, btw.
The reason for me trying to use this code is that it seems that my validator no longer work (with the latest AJAX version:)
| <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" |
| ErrorMessage="Overskriften må max. indeholde 512 tegn." |
| Display="None" ControlToValidate="RadEditor1" |
| ValidationExpression="^.{1,512}"> |
| </asp:RegularExpressionValidator> |
Even with 1-2 characters it will fire.
Regards,
Bo Hessner
0
Hi Hessner,
Please, try to achieve your scenario using a CustomValidator control:
<telerik:RadEditor ID="RadEditor1" runat="server"></telerik:RadEditor>
<asp:CustomValidator runat="server" ID="CustomValidator1" ClientValidationFunction="checkLength">*</asp:CustomValidator>
<asp:Button ID="button1" Text="Submit" runat="server" />
<script type="text/javascript">
var limitNum = 50;
var message = 'You are not able to type more than ' + limitNum + ' symbols!';
function checkLength(validator, args)
{
var editor = $find('<%=RadEditor1.ClientID%>'); // get a reference to RadEditor
var editorText = editor.get_text(); //get the HTML content of the control
args.IsValid = editorText.length < limitNum;
}
</script>
Best regards,
Rumen
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Please, try to achieve your scenario using a CustomValidator control:
<telerik:RadEditor ID="RadEditor1" runat="server"></telerik:RadEditor>
<asp:CustomValidator runat="server" ID="CustomValidator1" ClientValidationFunction="checkLength">*</asp:CustomValidator>
<asp:Button ID="button1" Text="Submit" runat="server" />
<script type="text/javascript">
var limitNum = 50;
var message = 'You are not able to type more than ' + limitNum + ' symbols!';
function checkLength(validator, args)
{
var editor = $find('<%=RadEditor1.ClientID%>'); // get a reference to RadEditor
var editorText = editor.get_text(); //get the HTML content of the control
args.IsValid = editorText.length < limitNum;
}
</script>
Best regards,
Rumen
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Hessner
Top achievements
Rank 2
Rank 2
answered on 04 Aug 2008, 10:40 AM
Super!
Regards,
Bo Hessner
Regards,
Bo Hessner