Node Inspector customisation

4 posts, 2 answers
  1. Mathew
    Mathew avatar
    11 posts
    Member since:
    Dec 2007

    Posted 14 Dec 2008 Link to this post

    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.
  2. Answer
    Tervel
    Admin
    Tervel avatar
    1337 posts

    Posted 16 Dec 2008 Link to this post

    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.
  3. Mathew
    Mathew avatar
    11 posts
    Member since:
    Dec 2007

    Posted 17 Dec 2008 Link to this post

    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.
  4. Answer
    Rumen
    Admin
    Rumen avatar
    14316 posts

    Posted 20 Dec 2008 Link to this post

    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.
Back to Top