fixed height radeditor

3 posts, 1 answers
  1. Daniel
    Daniel avatar
    4 posts
    Member since:
    Nov 2010

    Posted 24 May 2011 Link to this post

    I’d like to have a fixed height radeditor which will limit content input after the boundary of the radeditor is reached. However, after setting the Height (500px), EnableResize(false), and AutoResizeHeight(false) parameters scrollbars continue to appear and the page still accepts input indefinitely.


    Is there actually a way to limit the amount of input by fixing the height of a radeditor?

  2. Answer
    Rumen
    Admin
    Rumen avatar
    13804 posts

    Posted 25 May 2011 Link to this post

    Hi Daniel,

    RadEditor does not offer the required feature to limit the lines because the HTML markup is just a string it is not able to determine if the text entered will fit in a certain amount of space. However, you can enhance the provided code below to fit your scenario. Here is a basic example on how to limit the line length in the editor content area:

    <telerik:RadEditor ID="RadEditor1" OnClientLoad="OnClientLoad" runat="server"></telerik:RadEditor>
    <script type="text/javascript">
    function OnClientLoad(editor)
    {
    editor.attachEventHandler("onkeyup", function(e)
    {
    var brs = editor.get_document().body.getElementsByTagName("BR");
    if (brs.length > 2)
    {
    alert("You can only have 3 lines of text! Undoing last operation!");
    editor.undo(1);
    }
    } );
    }
    </script>

    Here is a another base solution which will help you to achieve your scenario:

    <script type="text/javascript">

    function checkEditor(editor, ev)
    {
    var targetHeight = editor.get_document().body.scrollHeight;
    var allowedHeight = editor.AllowedHeight;


    if (targetHeight > allowedHeight)
    {
    alert("Maximum allowed size content height is 350 pixels");

    if (ev)
    {
    ev.returnValue = false;
    ev.cancelBubble = true;
    }

    return false;
    }
    return true;
    }

    function OnClientCommandExecuted(editor,commandName, tool)
    {
    var allow = checkEditor(editor);

    if (false == allow)
    {
    editor.undo(1);
    }
    }

    function OnClientLoad(editor)
    {
    //Set content area to be one inch high
    var iframe = editor.get_contentAreaElement();
    iframe.style.height = "350px";
    iframe.style.border = "1px solid red";

    editor.AllowedHeight = iframe.offsetHeight;

    var resizeFnRef = function (e){checkEditor(editor, e)};

    editor.attachEventHandler("keydown", resizeFnRef);

    }
    </script>
    <telerik:RadEditor id="RadEditor1"
    Height = "350px"
    OnClientLoad="OnClientLoad"
    OnClientCommandExecuted = "OnClientCommandExecuted"
    Runat="server">
    </telerik:RadEditor>



    Kind regards,
    Rumen
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. Daniel
    Daniel avatar
    4 posts
    Member since:
    Nov 2010

    Posted 26 May 2011 Link to this post

    Thanks Rumen, very helpful. 
Back to Top