Node Inspector customisation

[Mathew]

Hello all,

I'd like some advice please - what is the most straightforward way to make adjustments to the Editor's Node Inspector? We wish to remove the options to adjust HTML attributes.

For example, when an image is selected we would like to remove the Width, Height, Alignment, Border Color and Border Width option, but retain Set Image Properties, Tooltip, and Classname. Is there an easy way to "turn off" the undesired options, or do we have to create a custom module with just the features we desire?

Many thanks,
Mathew.

[Tervel]

Hello Mathew,

There are two options to achieve that. One is to create a custom module based on the source code of the NodeInspector module - which is complicated (like the module itself) and error-prone.

The second possibility is to hack the module's configuration array for IMG tags. This can be done by adding the following line of script on the page:

//HACK - We do not advise for using it, but it is an easy one!
Telerik.Web.UI.Editor.Modules.RadEditorNodeInspector.prototype._nodeAttributesArray["IMG"] =
            [ "className", "SetImageProperties", "alt"];


Please note that the module always splits the number of tools in two rows - so by eliminating most of the tools, you will still end up with two rows of tools. This might look a little ugly.

Greetings,
Tervel
the Telerik team

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

[Mathew]

Hello Tervel,

Excellent, thanks - the hack produces the desired functionality. We have a script file dedicated to other minor changes we've made to the editor, so it was straightforward to add another line to it.

Another question in the same area - can we specify the classes that we want to appear in the 'Classname' dropdown, rather than have the entire set available? I'm hoping that there's a similar array that I can alter! Finally, is there a value that can be adjusted to increase the width of the dropdown element itself?

Thanks again,
Mathew.

[Rumen]

Hi Mathew,

Currently, the Node Inspector module of RadEditor lists all classes that the editor picks up from the parent page, but not only the classes that apply to the selected element in the content area. I logged this feature in our ToDo list and we will implement this feature for one of the future RadEditor builds. I also updated your Telerik points.

What you can do for the time being is to limit the populated classes in the dropdown by setting the CssClasses property, e.g.

<style type="text/css">
.table { color:red;}
green.table { color: green; }
pink.img { border: 1px solid pink; }
</style>

<telerik:RadEditor runat="server" ImageManager-ViewPaths="~/Images" ID="RadEditor1">
<Content>
<table>
    <tbody>
        <tr>
            <td>test</td>
            <td>test</td>
            <td>test</td>
        </tr>
        <tr>
            <td>test</td>
            <td>test</td>
            <td>test</td>
        </tr>
        <tr>
            <td>test</td>
            <td>test</td>
            <td>test</td>
        </tr>
    </tbody>
</table>
</Content>
<CssClasses>
    <telerik:EditorCssClass Name="greenTable" Value="green.table" />
</CssClasses>
</telerik:RadEditor>

Currently, RadEditor does not offer the ability to resize its modules.

Best regards,
Rumen
the Telerik team

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