I've taken the previous script examples and am trying to limit character content for multiple RadEditor controls on a single page (...see original thread, "Charector limit in Rad:Editor", posted 27 Oct 2008).
I've included my current version of the script below. Everything works, except when adding content to the editor using a simple "right click paste" command.
Typing beyond the specified character limits is handled correctly, as well as using the commands "Paste from Word", "Paste Plain Text", and "Paste As Html" when the [clipboard content + previous text entered] exceeds the specified character limits.
However, the paste command from a simple right click-paste or using the Edit/Paste function from the Menu... or ctl V does not result in the alert message that the limits have been exceeded.
Shown below is the code that I've been using.
Please let me know what I can do to resolve this.
Thanks in advance.
====================================================================================================
<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="contentPage.aspx.vb" Inherits="contentPage" title="Untitled Page" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript" src="limitCharacters2.js"></script>
<telerik:RadEditor ID="RadEditorHeadline" runat="server" OnClientLoad="LimitCharacters" OnClientPasteHtml="OnClientPasteHtml">
<Content></Content></telerik:RadEditor>
<telerik:RadEditor ID="RadEditorPurpose" runat="server" OnClientLoad="LimitCharacters" NewLineBr="False" OnClientPasteHtml="OnClientPasteHtml">
<Content></Content></telerik:RadEditor>
</asp:Content>
//========================================================================================================
//limitCharacters2.js
//========================================================================================================
// JavaScript File to limit characters entered into Prometheus Rad Editor control
var editorList= new Object();
var editorLengthArray = [80,80,80];
var counter = 0;
function isAlphaNumericKey(keyCode)
{
if ((keyCode > 47 && keyCode < 58) || (keyCode > 64 && keyCode < 91))
{
return true;
}
return false;
}
function LimitCharacters(editor)
{
editorList[editor.get_id()] = editorLengthArray[counter];
counter++;
editor.attachEventHandler("onkeydown", function(e)
{
e = (e == null)? window.event : e;
if (isAlphaNumericKey(e.keyCode))
{
var maxTextLength = editorList[editor.get_id()];
textLength = editor.get_text().length;
if (textLength >= maxTextLength)
{
alert('You are not able to type more than ' + maxTextLength + ' symbols!');
e.returnValue = false;
}
}
});
}
function CalculateLength(editor, value)
{
var textLength = editor.get_text().length;
var clipboardLength = value.length;
textLength += clipboardLength;
return textLength;
}
function OnClientPasteHtml(editor, args)
{
var maxTextLength = editorList[editor.get_id()];
var commandName = args.get_commandName();
var value = args.get_value();
if (commandName == "PasteFromWord"
|| commandName == "PasteFromWordNoFontsNoSizes"
|| commandName == "PastePlainText"
|| commandName == "PasteAsHtml"
|| commandName == "Paste" )
{
var textLength = CalculateLength (editor, value);
if (textLength >= maxTextLength)
{
alert('You are not able to type more than ' + maxTextLength + ' symbols!');
args.set_cancel(true);
}
}
}
//======================================================================================================
7 Answers, 1 is accepted
Please, try the following code enhancement of the solution:
| <telerik:RadEditor ID="RadEditorHeadline" runat="server" OnClientLoad="LimitCharacters" OnClientPasteHtml="OnClientPasteHtml"> |
| <Content></Content></telerik:RadEditor> |
| <telerik:RadEditor ID="RadEditorPurpose" runat="server" OnClientLoad="LimitCharacters" NewLineBr="False" OnClientPasteHtml="OnClientPasteHtml"> |
| <Content></Content></telerik:RadEditor> |
| <script type="text/javascript"> |
| var editorList= new Object(); |
| var editorLengthArray = [20,30]; |
| var counter = 0; |
| function isAlphaNumericKey(keyCode) |
| { |
| if ((keyCode > 47 && keyCode < 58) || (keyCode > 64 && keyCode < 91)) |
| { |
| return true; |
| } |
| return false; |
| } |
| function LimitCharacters(editor) |
| { |
| editorList[editor.get_id()] = editorLengthArray[counter]; |
| counter++; |
| editor.attachEventHandler("onkeydown", function(e) |
| { |
| e = (e == null)? window.event : e; |
| if (isAlphaNumericKey(e.keyCode)) |
| { |
| var maxTextLength = editorList[editor.get_id()]; |
| textLength = editor.get_text().length; |
| if (textLength >= maxTextLength) |
| { |
| alert('You are not able to type more than ' + maxTextLength + ' symbols!'); |
| e.returnValue = false; |
| } |
| } |
| }); |
| var element = document.all ? editor.get_document().body : editor.get_document(); |
| $telerik.addExternalHandler(element, "paste", function(e) |
| { |
| e = (e == null)? window.event : e; |
| var maxTextLength = editorList[editor.get_id()]; |
| textLength = editor.get_text().length; |
| var clipboardLength = window.clipboardData.getData("Text").length; |
| textLength += clipboardLength; |
| if (textLength >= maxTextLength) |
| { |
| alert('You are not able to type more than ' + maxTextLength + ' symbols!'); |
| e.returnValue = false; |
| return false; |
| } |
| }); |
| } |
| function CalculateLength(editor, value) |
| { |
| var textLength = editor.get_text().length; |
| var clipboardLength = value.length; |
| textLength += clipboardLength; |
| return textLength; |
| } |
| function OnClientPasteHtml(editor, args) |
| { |
| var maxTextLength = editorList[editor.get_id()]; |
| var commandName = args.get_commandName(); |
| var value = args.get_value(); |
| if (commandName == "PasteFromWord" |
| || commandName == "PasteFromWordNoFontsNoSizes" |
| || commandName == "PastePlainText" |
| || commandName == "PasteAsHtml" |
| || commandName == "Paste" ) |
| { |
| var textLength = CalculateLength (editor, value); |
| if (textLength >= maxTextLength) |
| { |
| alert('You are not able to type more than ' + maxTextLength + ' symbols!'); |
| args.set_cancel(true); |
| } |
| } |
| } |
| </script> |
It works on my side when pasting content with Ctrl+V, via the Paste option in the context menu as well as the Paste option in the toolbar Edit menu.
Regards,
Rumen
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Rank 1
I was able to reproduce the Paste problem in IE8 Compatibility Mode only. Can you please tell whether you experience this problem in IE8 Compatibility mode only or in IE8 Standards mode too?
In the meantime you can fix the problem by setting StripFormattingOptions="NoneSupressCleanMessage"
Best regards,
Rumen
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Rank 1
I am glad that the provided information helped to resolve the problem.
Since other people could experience the issue in the future, I logged it in our PITS system with ID: 2285 and our developers will try to fix it.
Best regards,
Rumen
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Rank 1
the javascript codes are wonderful, I'm using this for my site, but I got another problem here, I have 10+ radeditors on the page, I need to get the max length dynamically， how can I set up the editorLengthArray? the function is like:
javascript
var maxTextLength =editor.get_maxlength();
Csharp code:
Editor1.Maxlength = 255;
Editor2.Maxlength = 550;
...
You can set your own attribute for example named MaxLength to the RadEditor's declaration and obtain its value from the RadEditor's wrapper, e.g.
<script type="text/javascript">function OnClientLoad(editor){ var wrapper = editor.get_element(); var maxChars = wrapper.getAttribute("maxLength"); alert(maxChars);} </script><telerik:radeditor runat="server" MaxLength="20" ID="RadEditor1" OnClientLoad="OnClientLoad"></telerik:radeditor> <telerik:radeditor runat="server" MaxLength="40" ID="RadEditor2" OnClientLoad="OnClientLoad"></telerik:radeditor>You can set the MaxLength attribute from the server using this code:
RadEditor1.Attributes["MaxLength"] = "1000";
Kind regards,
Rumen
the Telerik team