RadEditor - change height of toolbar

[Robert]

Hi,

I have a deployment of the RadEditor in SPS2007, where the RadEditor control needs to be no wider than 480px, and display all of the toolbar icons.

In previous versions of the RadEditor there was a property of the ConfigFile.xml called 'ToolsOnPage', which could be set to false, to allow the 'ToolsHeight' and 'ToolsWidth' properties to be configured (in fact there is still an old broken link to this property on the ToolsHeight page see: http://www.telerik.com/help/aspnet/editor/radeditor-telerik.webcontrols.radeditor-toolsheight.html ). 

However, without the ToolsOnPage property, there doesn't seem to be an obvious way to reduce the width of the control below c. 660px, without icons on the toolbar becoming obscured. 

So, is there a simple way to increase the number of rows that the toolbar icons are displayed over (so that I can reduce the radeditor control's width back to 480px)?


NB, I haven't changed the default configuration in any of the files other than the ConfigFile.xml, which is currently set with the following:

<configuration>
   <property name="ToolbarMode">ShowOnFocus</property>
  <property name="Skin">Vista</property>
  <property name="Height">300px</property>
  <property name="Width">660px</property>
  <property name="DialogHandlerUrl">~/Telerik.Web.UI.DialogHandler.axd</property>
</configuration>

Regards,

Rob

[Stanimir]

Hi Robert,

The property that you need is ToolbarMode (Toolbar Modes). By default it is set to ShowOnFocus. Set it to PageTop (Set Properties Via Config File):

<property name="ToolbarMode">PageTop</property>

I hope this helps.


All the best,
Stanimir
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Robert]

Stanimir,

thank you for your response.

When set to 'PageTop', doesn't the ToolbarMode property simply position the toolbar at the top of the page? This is a useful workaround, but doesn't appear to provide exactly the same functionality.

I thought in previous versions of the RadEditor that you could display (on focus) a toolbar directly above the RadEditor, and that you could configure it, so that the toolbar and RadEditor could have different widths from each other? Or alternatively, that you could style it some that the toolbar icons wrapped to fit a fixed width?  I thought that this used to be configurable via the 'ToolsOnPage' property.

Is this functionality no longer avaliable?

Regards,

Rob

[Stanimir]

Hello Robert,

Check the following settings:

<property name="ToolbarMode">ShowOnFocus</property>
<property name="ToolsWidth">680px</property>
<property name="Width">400px</property>

I hope that it can fit your case.
If you set the ToolbarMode to Default the toolbar will be resized to the width of the editor.

Regards,
Stanimir
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Robert]

Thank you Stanimir,

while this doesn't allow me to change the number of rows of icons or width of the toolbar, this does allow the Radeditor to be reduced to fit my column width.

(NB, is it possible to have two different widths simultaneously? I.e. to have one version of the Radeditor which fits a 400px width, and on the same page have another Radeditor control which fits a narrower column, say 200px width? I assume I can only set a single width for all of my Radeditor controls?)

Cheers,

Rob

[Stanimir]

Hi Robert,

In general you can only set the width in the ConfigFile.xml. However if you can distinct the different editors you can set the size by using setSize method: http://www.telerik.com/help/aspnet-ajax/editor_setsize.html.

1. Add the following row in the ConfigFile.xml:

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

2. Add the following javascript mode to the MOSSEditorTools.js file:

function OnClientLoad(editor)
{
    //if ([condition, which distinguishes the editors])
    //{
        window.setTimeout(function ()
        {
            //set the width and height of the RadEditor
            //you can set the time interval 500 to a smaller value
            editor.setSize("800", "600");
        }, 500);
    //}
}

All the best,
Stanimir
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Robert]

Thanks for your help Stanimir,

Rob