Selective suppress the SetImageProperties dialog

[ian webster]

Hi,

I'm using the image tag as a place holder for some custom content the up shot is that if an image has certain attributes (some I've made up) I want to suppress the standard image properties editor that the rad editor has built in if the user clicks 'properties' in the context menu.

I've been able to get the suppress to work correctly, but I have also stopped the image properties editor from working when a normal image is used.

My rad editor looks like:

<telerik:RadEditor ID="ucEditor" runat="server" OnClientLoad="OnClientLoad" Width="99%" Height="470px" ToolsFile="~/Resources/Config/RadControls/DefaultToolsFile.xml">
    <CssFiles>
        <telerik:EditorCssFile Value="" />
    </CssFiles>
    <ContextMenus>
        <telerik:EditorContextMenu TagName="IMG" Enabled="true">
            <telerik:EditorTool Name="EditPageControl" Text="Edit Page Control" />
            <telerik:EditorTool Name="SetImageProperties" />
        </telerik:EditorContextMenu>
    </ContextMenus>
</telerik:RadEditor>

I've got the following handler for set image properties:

Telerik.Web.UI.Editor.CommandList["SetImageProperties"] = function (commandName, editor, args) {

    var elem = editor.getSelectedElement();
    var typeId;
    var inmemoryId;
    var savedId;
    var pageControlName;

    //get the selected tag
    editor.selectElement(elem);
    var selection = editor.getSelection();
    var selectionHTML = selection.getHtml();
    //attempt to retrieve the parameters we need from the tags
    //attributes
    typeId = $telerik.$(selectionHTML).attr("typeId");
    savedId = $telerik.$(selectionHTML).attr("savedId");
    inmemoryId = $telerik.$(selectionHTML).attr("inMemoryId");
    pageControlName = $telerik.$(selectionHTML).attr("pageControlName");

    //check if this is a dynamic page control place holder
    if (typeId != null && savedId != null && inmemoryId != null && pageControlName != null) {
        //user has selected an dynamic page control and is trying to edit it using the image manager - must prevent this!
        alert('This is a dynamic page control, please click Edit Page Control to edit it');
        return; //disable the browsers context menu
    }
}

I suspect I need an 'else' part to go with the if but I'm not sure how you would manually invoke the image properties editor.

Thanks,

Ian.

[Dobromir]

Hi Ian,

You can simply store the original command before overwriting it and then use it in the else clause, e.g.:

//store the original command
var oldSetImagePropertiesCommand = Telerik.Web.UI.Editor.CommandList["SetImageProperties"];

Telerik.Web.UI.Editor.CommandList["SetImageProperties"] = function (commandName, editor, args)
{
    var elem = editor.getSelectedElement();
    var typeId;
    var inmemoryId;
    var savedId;
    var pageControlName;

    //get the selected tag
    editor.selectElement(elem);
    var selection = editor.getSelection();
    var selectionHTML = selection.getHtml();
    //attempt to retrieve the parameters we need from the tags
    //attributes
    typeId = $telerik.$(selectionHTML).attr("typeId");
    savedId = $telerik.$(selectionHTML).attr("savedId");
    inmemoryId = $telerik.$(selectionHTML).attr("inMemoryId");
    pageControlName = $telerik.$(selectionHTML).attr("pageControlName");

    //check if this is a dynamic page control place holder
    if (typeId != null && savedId != null && inmemoryId != null && pageControlName != null)
    {
        //user has selected an dynamic page control and is trying to edit it using the image manager - must prevent this!
        alert('This is a dynamic page control, please click Edit Page Control to edit it');
        return; //disable the browsers context menu
    }
    else
    {
        oldSetImagePropertiesCommand(commandName, editor, args);
    }
}

Best wishes,
Dobromir
the Telerik team

[ian webster]

Hi Dobromir,

Thank you - that worked perfectly.

Regards,

Ian.