Changing SPRadEditor size via JS

[Benjamin]

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

[Rumen]

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

[Benjamin]

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

[Rumen]

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

[Benjamin]

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

[Benjamin]

Hi Rumen,

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

Greetings,
Ben

[Rumen]

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