Red line after x words

3 posts, 0 answers
  1. Erick
    Erick avatar
    81 posts
    Member since:
    Feb 2010

    Posted 12 Dec 2013 Link to this post

    Hi,
    I'm searching for a solution to limit the editor input to 2000 words, instead of blocking of the input, add a red line after 2000 words and the input can be continued. Same when pasting a large text, after pasting a large text, a red line have to be added after 2000 words.

    Can you please help me out with this?

    Kind regards,
    Jelle
  2. Ianko
    Admin
    Ianko avatar
    1932 posts

    Posted 17 Dec 2013 Link to this post

    Hi Erick,

    The desired functionality cannot be implemented with the built-in properties of the RadEditor control. You should further implement and customize such logic.

    I have prepared a sample customization, which you could follow for the desired customization:
    <telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad">
     
    </telerik:RadEditor>
     
    <script type="text/javascript">
        function OnClientLoad(editor, args) {
            editor.attachEventHandler("onkeydown", function (e) {
                var textLen = getLength(editor.get_text());
                var alowedChars = !!(e.keyCode === 8 || e.keyCode === 46)
     
                if (textLen >= 20 && !alowedChars) {
                    addLine(editor, "red", "2px");
                    e.preventDefault();
                    setTimeout(function () {
                        alert("You have reached the limit of your message!");
                    }, 0);
                }
            })
                 
        }
     
        function getLength(text) {
            return text.length
        }
                 
        function addLine(editor, color, height) {
            var editorContent = $telerik.$(editor.get_contentArea());
            var line = editorContent.has("#uniqueIdentifier").length;
     
            if (!line) editor.pasteHtml('<hr id="uniqueIdentifier" style="background-color: '
                + color + '; height: ' + height + ';" />');
        }
    </script>

    Note that you can find further information about the used method and the Client-side API in these articles:

    Regards,
    Ianko
    Telerik
    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 the blog feed now.
  3. Erick
    Erick avatar
    81 posts
    Member since:
    Feb 2010

    Posted 16 Jan 2014 Link to this post

    Hi,
    Thanks for your answer and semi-solution.
    We will test and try this in the next version of our application.

    Kind regards,
    Jelle
Back to Top