Changing SPRadEditor size via JS

7 posts, 2 answers
  1. Benjamin
    Benjamin avatar
    8 posts
    Member since:
    Aug 2011

    Posted 20 Oct 2011 Link to this post

    Hi Telerik team,

    is it possible to change the size of the SPRadEditor via Javascript? 

    Following code does not work for me:

    function OnClientLoad(editor, args) {
        editor.get_contentAreaElement().style.height = 490px;
    }


    Thank you very much,
    Ben
  2. Answer
    Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 24 Oct 2011 Link to this post

    Hi Benjamin,

    You can try the following open the \Program Files\Common Files\Microsoft Shared\Web Server Extensions\wpresources\RadEditorSharePoint\6.1.6.0__1f131a624888eeed\Resources\ConfigFile.xml / ListConfigFile.xml file(s) and set the OnClientLoad property:

    <property name="OnClientLoad">OnClientLoad</property>

    After that open the\Program Files\Common Files\Microsoft Shared\Web Server Extensions\wpresources\RadEditorSharePoint\6.1.6.0__1f131a624888eeed\Resources\SPEditorTools.js file and put at the end the following function:

    function OnClientLoad(editor, args) {
        setTimeout(function()
        {
            editor.setSize(1000, 1000);
        }, 1000);
    }

    Save the files, clean the browser cache and reload the page to see how the setSize function will resize RadEditor for SharePoint 2010.

    Greetings,
    Rumen
    the Telerik team
    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 their blog feed now

  3. Benjamin
    Benjamin avatar
    8 posts
    Member since:
    Aug 2011

    Posted 28 Oct 2011 Link to this post

    Hi Rumen,

    that works, i can increase the size but decrease does not work. I have seen that the min-height and min-width are set. But following code will not work for decreasing: 

    function OnClientLoad(editor, args) {
        var elem = editor.get_element();
        elem.style.minWidth = "";
        elem.style.minHeight = "";
        setTimeout(function()
        {
                editor.setSize(400+"px", 300+"px");
        }, 1000);
    }



    Thank you very much,
    Ben

  4. Answer
    Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 28 Oct 2011 Link to this post

    Hi Ben,

    You can set the min-height and min-width properties to 0px by putting the following class on the page with RadEditor:

     <style type="text/css">
    .reWrapper
    {
    min-height: 0px !important;
         min-width: 0px !important;
    }
    </style>



    Kind regards,
    Rumen
    the Telerik team
    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 their blog feed now
  5. Benjamin
    Benjamin avatar
    8 posts
    Member since:
    Aug 2011

    Posted 28 Oct 2011 Link to this post

    Hi Rumen,

    thanks for the quick response. For me this works perfectly: 

    .reWrapper,
    .reContentArea
    {
         min-height: 0px !important;
         min-width: 0px !important;
    }


    Thank you very much!
    Ben
  6. Benjamin
    Benjamin avatar
    8 posts
    Member since:
    Aug 2011

    Posted 04 Nov 2011 Link to this post

    Hi Rumen,

    is it also possible to avoid the timer? In some IEs is the delay significant (5 -7 seconds).

    Greetings,
    Ben
  7. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 09 Nov 2011 Link to this post

    Hi Benjamin,

    Add a check for IE and set the timeout to 0 seconds, e.g.

    function OnClientLoad(editor, args) {
        var elem = editor.get_element();
        elem.style.minWidth = "";
        elem.style.minHeight = "";
        if ($telerik.isIE)
        {

            setTimeout(
    function()
            {
                   editor.setSize(400+"px", 300+"px");
            }, 0);
        }
        else
        {
             setTimeout(function()
            {
                   editor.setSize(400+"px", 300+"px");
            }, 100);

        }
    }

    Modify the timing code if it does not work in your environment.

    Regards,
    Rumen
    the Telerik team
    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 their blog feed now
Back to Top