This is a migrated thread and some comments may be shown as answers.

RadEditor - limit characters entered (issue with right click - paste command)

7 Answers 244 Views
Editor
This is a migrated thread and some comments may be shown as answers.
bill
Top achievements
Rank 1
bill asked on 27 Aug 2009, 01:01 PM
Hi,

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

Sort by
0
Rumen
Telerik team
answered on 31 Aug 2009, 12:44 PM
Hi Bill,

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.
0
Zhanna Gultaeva
Top achievements
Rank 1
answered on 27 May 2010, 11:52 AM
Helo!
I faced a problem that the Paste option in the context menu and the Paste option in the toolbar works good for me when there is no selected text in RadEditor, but when I select some text, they doesn't works. I added the Alert() to the OnClientPasteHtml event and find out, that this event fired by these commands only when no text is selected and doesn't fired otherwise. When I use Ctrl+V everything works fine in both cases.
I use 2009 Q3 version of RadControls.
Here is my control declaration:
<telerik:RadEditor ID="fld_editor_DOCTEXT" runat="server" ContentFilters="RemoveScripts, MakeUrlsAbsolute, FixUlBoldItalic, IECleanAnchors"
                                            EditModes="Design" Height="115px" Skin="Windows7" Width="750px" 
                                            OnClientLoad="OnRadEditorLoad">
                                            <Content>
                                            </Content>
                                            <FontNames>
                                                <telerik:EditorFont Value="Arial Narrow" />
                                                <telerik:EditorFont Value="Arial" />
                                                <telerik:EditorFont Value="Arial Black" />
                                                <telerik:EditorFont Value="Courier New" />
                                                <telerik:EditorFont Value="Tahoma" />
                                                <telerik:EditorFont Value="Times New Roman" />
                                                <telerik:EditorFont Value="Verdana" />
                                            </FontNames>
                                            <ContextMenus>
                                                <telerik:EditorContextMenu TagName="*">
                                                    <telerik:EditorTool Name="Cut" />
                                                    <telerik:EditorTool Name="Copy" />
                                                    <telerik:EditorTool Name="Paste" />
                                                </telerik:EditorContextMenu>
                                            </ContextMenus>
                                            <Tools>
                                                <telerik:EditorToolGroup>
                                                    <telerik:EditorTool Name="FontName" />
                                                    <telerik:EditorTool Name="FontSize" />
                                                    <telerik:EditorTool Name="Bold" />
                                                    <telerik:EditorTool Name="Italic" />
                                                    <telerik:EditorTool Name="Underline" />
                                                    <telerik:EditorTool Name="ForeColor" />
                                                    <telerik:EditorTool Name="Cut" />
                                                    <telerik:EditorTool Name="Copy" />
                                                    <telerik:EditorTool Name="Paste" />
                                                    <telerik:EditorTool Name="Undo" />
                                                    <telerik:EditorTool Name="InsertOrderedList" />
                                                    <telerik:EditorTool Name="Indent" />
                                                    <telerik:EditorTool Name="BackColor" />
                                                    <telerik:EditorTool Name="JustifyLeft" />
                                                    <telerik:EditorTool Name="JustifyCenter" />
                                                    <telerik:EditorTool Name="JustifyRight" />
                                                    <telerik:EditorTool Name="JustifyFull" />
                                                </telerik:EditorToolGroup>                                                
                                            </Tools>
                                        </telerik:RadEditor>


and my event handler:

function OnRadEditorLoad(editor, args)
        {                  
            editor.attachEventHandler("onkeyup", function(e)
            {                                       
                if('' != trim(editor.get_text()))
                {                    
                    document.getElementById('VersionsPanel').disabled = true;
                    document.getElementById('lbl_VersionsEnabled').innerHTML = "Нельзя приложить файл к документу с заполненным полем \"Текст документа\"";
                }
                else
                {
                    document.getElementById('VersionsPanel').disabled = false;
                    document.getElementById('lbl_VersionsEnabled').innerHTML = "";
                }
            });
        }
0
Rumen
Telerik team
answered on 31 May 2010, 12:16 PM
Hello Vakhtang,

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.
0
Zhanna Gultaeva
Top achievements
Rank 1
answered on 31 May 2010, 12:50 PM
Hallo, Rumen!
I've checked my currently browser mode and - yes, you're right - the problem appears only in compatibility mode, and StripFormattingOptions="NoneSupressCleanMessage" resolved the issue. 
Thank you wery mutch!
0
Rumen
Telerik team
answered on 31 May 2010, 01:05 PM
Hi Vakhtang,

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.
0
li
Top achievements
Rank 1
answered on 16 Aug 2010, 07:20 PM
Hi,
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;
...
0
Rumen
Telerik team
answered on 19 Aug 2010, 10:57 AM
Hi,

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
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
Tags
Editor
Asked by
bill
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Zhanna Gultaeva
Top achievements
Rank 1
li
Top achievements
Rank 1
Share this question
or