Changing context menu programmatically client-side?

[Recursor]

Hello,
I'm using the prometheus editor to create mail merge files, and I've been trying to use img tags as placeholders for the merge fields.  My question is, is it possible to make the context menu items for this mergefield img tag (it would have an attribute marking it as a mergefield) different from those of a regular img tag?  Is it possible to access the object model for the context menu after the img is selected and before the menu pops so I can set the visibility of each menu item?  Any help would be greatly appreciated.
Thanks,
David

[Tervel]

Hi David,

This is an interesting request, and we can come up with an example early next week which we will post here.

Greetings,
Tervel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Tervel]

Hi David,

We implemented a small example for you, however, in order for it to work we had to extend on short notice the client-side editor API a bit to allow access to the context menus.

The current version of the editor will not work properly with this code, yet the RadControls Q3 release coming in a week will feature the new editor version.

We hope that such a one-week delay is not critical for you. Once the Q3 release is out and if you need extra help with the example to fully cover your scenario, please let us know.

JavaScript Code

/***********************************************************************************************************************
*
*   Adding and controlling a custom context menu item
*
************************************************************************************************************************/
function OnClientLoad(editor)
{
    var contextMenu = editor.getContextMenuByTagName("IMG");
    if (!contextMenu) return;

    //Attach to the context menu show event, obtain editor selection and determine which tools to show
    contextMenu.add_show(function()
    {
       //Must be an image, the context menu would not fire
       var sel = editor.getSelectedElement();

       //An array of menu item objects
       var menuItems = contextMenu.get_items();

       //The custom menu item
       var customItem = menuItems[menuItems.length -1];

       //Check for custom attribute
       if (sel.getAttribute("mergefield"))
       {
            //Enable custom tool
            customItem.get_element().style.display = "";
       }
       else
       {
            //Hide custom tool
            customItem.get_element().style.display = "none";
       }
    });
}


Telerik.Web.UI.Editor.CommandList.CustomImageDialog = function(editor, commandName, args)
{
    alert(" Custom image manager called");
};

[Sample] CSS for the Custom tool

.CustomImageDialog
{
    border:1px solid red;
}

Editor declaration

<telerik:radeditor runat="server" ID="RadEditor1"
OnClientLoad = "OnClientLoad"
Height="400px">
  <ContextMenus>
      <telerik:EditorContextMenu TagName="IMG">
        <telerik:EditorTool Name="SetImageProperties"  />
        <telerik:EditorTool Name="ImageMapDialog" />
        <telerik:EditorTool Name="CustomImageDialog" Text="Custom Image Dialog" />
      </telerik:EditorContextMenu>
  </ContextMenus>
  <Content>
    Custom image <img mergefield="yes" alt="product logo" src="../../Img/productLogo.gif" />
    Plain image <img alt="product logo" src="../../Img/productLogo.gif" />
  </Content>
</telerik:radeditor>

You will need to provide css styling for the tool yourself (e.g. use the background css attribute to specify an image)
You will also need to implement the custom dialog that opens for the custom image (please see our online demo -
http://www.telerik.com/DEMOS/ASPNET/Prometheus/Editor/Examples/CustomDialogs/DefaultCS.aspx

Regards,
Tervel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Recursor]

Awesome!  This is exactly what I was looking for.  You guys are the best!

[Recursor]

Hi guys,
This seems to have stopped working right with the Q1 '09 release.  Whenever I bring up a context menu for the regular image it shows the empty space for the mailmerge menuitem.  When I bring up the context menu for a mailmerge image, the regular image menuitem (the first one) shows up but is empty.  Previously, it would only show the proper menuitem when you right click to bring up the context menu (I made just a trivial change to the code Tervel sent.)  Any ideas on how I can get this working again?

Also, is it possible to specify an icon for the custom menuitem?

Thanks!
David

[Rumen]

Hi David,

Please, try the following code with the latest Q1 SP1 2009 version of RadEditor for ASP.NET AJAX:

<telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad">
    <ImageManager ViewPaths="~/Images" UploadPaths="~/Images"  />
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="CustomImageDialog" />
        </telerik:EditorToolGroup>
    </Tools>
    <ContextMenus>
        <telerik:EditorContextMenu TagName="IMG">
            <telerik:EditorTool Name="ImageMapDialog" />
            <telerik:EditorTool Name="CustomImageDialog" />
        </telerik:EditorContextMenu>
    </ContextMenus>
    <Content>
        <img src="http://demos.telerik.com/aspnet-ajax/Common/Img/Icons/Editor.gif" mergefield="mergefield"/>
        <br/><img src="http://demos.telerik.com/aspnet-ajax/Common/Img/Icons/Editor.gif" />
    </Content>
</telerik:RadEditor>
<script type="text/javascript">
/***********************************************************************************************************************
*
*   Adding and controlling a custom context menu item
*
************************************************************************************************************************/
function OnClientLoad(editor)
{
    var contextMenu = editor.getContextMenuByTagName("IMG");
    if (!contextMenu) return;

    //Attach to the context menu show event, obtain editor selection and determine which tools to show
    contextMenu.add_show(function()
    {
       //Must be an image, the context menu would not fire
       var sel = editor.getSelectedElement();

       //An array of menu item objects
       var menuItems = contextMenu.get_items();

       //The custom menu item
       var customItem = menuItems[menuItems.length -1];

       //Check for custom attribute
       if (sel.getAttribute("mergefield"))
       {
            //Enable custom tool

                customItem.get_element().style.display = "";
                customItem.get_element().parentNode.style.display = "";
       }
       else
       {
            //Hide custom tool
            customItem.get_element().style.display = "none";
            customItem.get_element().parentNode.style.display = "none";
       }
    });
}


Telerik.Web.UI.Editor.CommandList.CustomImageDialog = function(editor, commandName, args)
{
    alert(" Custom image manager called");
};
</script>

To set a custom image for the custom tool put the following css class on the page with RadEditor:

    <style type="text/css">
    .CustomImageDialog
    {
       background-image: url(http://demos.telerik.com/aspnet/RadControls/Editor/Skins/Default/buttons/ImageManager.gif) !important;
    }
    </style>

For your convenience I have attached my test page.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Recursor]

Thanks Rumen, that worked perfectly!
David

[Matti]

There is a bug with this code in Google Chrome.

I am using Google Chrome 4.1.249.1017 beta (39874) and the code below is not returning the correct element, it is actually returning the last element I right-clicked.  Firefox and IE work fine.  Is this known?

editor.getSelectedElement()

Here is my js:

function OnClientLoad(editor, args)
{
    setupContextMenu(editor, "IMG");
    setupContextMenu(editor, "A");
}

function setupContextMenu(editor, tagname) {
    var contextMenu = editor.getContextMenuByTagName(tagname);
    if (!contextMenu) return;

    //Attach to the context menu show event, obtain editor selection and determine which tools to show
    contextMenu.add_show(function()
    {
       //Must be an image, the context menu would not fire
       var sel = editor.getSelectedElement();
        if (sel.tagName == "IMG" && sel.parentNode != null && sel.parentNode.tagName == "A")
        {
            selsel = sel.parentNode;
        }

       //An array of menu item objects
       var menuItems = contextMenu.get_items();

       //The custom menu item
       var customItem = menuItems[menuItems.length -1];

       //Check for custom attribute
       if (sel.getAttribute("social"))
       {
            //Enable custom tool
            customItem.get_element().style.display = "";
            customItem.get_element().parentNode.style.display = "";
       }
       else
       {
            //Hide custom tool
            customItem.get_element().style.display = "none";
            customItem.get_element().parentNode.style.display = "none";
       }
    });
}

[Dobromir]

Hi Matti,

RadEditor's content area is an editable IFRAME which uses browser's RichText Editing engine. Chrome and Safari do not support element selection on mouse click and that is the reason for the incorrect selection. RadEditor is handling the oncontextmenu event to provide ContextMenu functionality.

Please try the following slightly modified code (modifications are marked with //added by Telerik comments) :

function setupContextMenu(editor, tagname)
{
    var contextMenu = editor.getContextMenuByTagName(tagname);
    if (!contextMenu) return;

    //Attach to the context menu show event, obtain editor selection and determine which tools to show
    contextMenu.add_show(function()
    {
        //added by Telerik
        //using setTimeout to ensure that the selected element is the correct one
        setTimeout(function()
        {
            //Must be an image, the context menu would not fire
            var sel = editor.getSelectedElement();
            if (sel.tagName == "IMG" && sel.parentNode != null && sel.parentNode.tagName == "A")
            {
                selsel = sel.parentNode;
            }

            //An array of menu item objects
            var menuItems = contextMenu.get_items();

            //The custom menu item
            var customItem = menuItems[menuItems.length - 1];

            //added by Telerik
            //get ContextMenuElement
            var contextMenuElement = $telerik.$("div.reDropDownBody")[0];

            //Check for custom attribute
            if (sel.getAttribute("social"))
            {
                //Enable custom tool
                customItem.get_element().style.display = "";
                customItem.get_element().parentNode.style.display = "";

                //added by Telerik
                //set the correct height to the contextmenu wrapper
                contextMenuElement.style.height = contextMenuElement.firstChild.offsetHeight + "px";
            }
            else
            {
                //Hide custom tool
                customItem.get_element().style.display = "none";
                customItem.get_element().parentNode.style.display = "none";

                //added by Telerik
                //set the correct height to the contextmenu wrapper
                contextMenuElement.style.height = contextMenuElement.firstChild.offsetHeight + "px";
            }
        }, 0);
    });
}

Sincerely yours,
Dobromir
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Matti]

Dobromir,

Thank you for your speedy reply.  This fixed the problem with chrome and safari.  There was one thing I found testing with IE, it was adding vertical scroll, but I just set overflow to hidden and works great now.  I've posted the final code below, thanks again for your help!

function OnClientLoad(editor, args)
{
    setupContextMenu(editor, "IMG");
    setupContextMenu(editor, "A");
}

function setupContextMenu(editor, tagname) {
    var contextMenu = editor.getContextMenuByTagName(tagname);
    if (!contextMenu) return;

    //Attach to the context menu show event, obtain editor selection and determine which tools to show
    contextMenu.add_show(function()
    {
       setTimeout(function()
        {
            //Must be an image, the context menu would not fire
           var sel = editor.getSelectedElement();
            if (sel.tagName == "IMG" && sel.parentNode != null && sel.parentNode.tagName == "A")
            {
                selsel = sel.parentNode;
            }

           //An array of menu item objects
           var menuItems = contextMenu.get_items();

           //The custom menu item
           var customItem = menuItems[menuItems.length -1];

            //get ContextMenuElement
            var contextMenuElement = $telerik.$("div.reDropDownBody")[0];

           //Check for custom attribute
           if (sel.getAttribute("social"))
           {
                //Enable custom tool
                customItem.get_element().style.display = "";
                customItem.get_element().parentNode.style.display = "";

                //set the correct height to the contextmenu wrapper
                contextMenuElementcontextMenuElement.style.height = contextMenuElement.firstChild.offsetHeight + "px";
                // Fix vertical scroll in IE
                contextMenuElement.style.overflow = 'hidden';
           }
           else
           {
                //Hide custom tool
                customItem.get_element().style.display = "none";
                customItem.get_element().parentNode.style.display = "none";

                //set the correct height to the contextmenu wrapper
                contextMenuElementcontextMenuElement.style.height = contextMenuElement.firstChild.offsetHeight + "px";
                // Fix vertical scroll in IE
                contextMenuElement.style.overflow = 'hidden';
           }
        }, 0);
    });
}

Thank you,

Matti

[Dobromir]

Hi Matti,

Thank you for sharing your final code with us. I think this is a very good solution and will be useful to the community. If you post it as a CodeLibrary your contribution will be rewarded with Telerik Points.

Best wishes,
Dobromir
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[dick]

This doesn't seem to work when the tools are in a separate xml file and not declared in the mark up. I cannot get any context menu item when I call the contextMenu.get_items() method. Any suggestions?

here is a sample of my code:
        var contextMenu = editor.getContextMenuByTagName("*");
        var menuItems = contextMenu.get_items();
        menuItems[0].get_element().style.display = "";

menuItems[0] returns undefined.

[Dobromir]

Hi Dick,

By design, initially the context menu's items are not populated.

As you can see in the code of the related code library, the get_items() method is called in the context menu's ClientShow event - this ensures that the collection will be populated.

Kind regards,
Dobromir
the Telerik team

[Peter]

 

Hi alltogether

you provide examples to enable disable on client side

customItem.get_element().style.display = "";

customItem.get_element().parentNode.style.display = "";

that works fine thank you!

how do i access the shown text of a tool in a context item on client side?
For example for a tool which toggles its function according the selection.

customItem.get_???? = "new text"

( Server-Side I can access the text by

 

 

EditorTool et = new EditorTool("Custom1");

 

et.Text =

 

"shown text on context menu";
)

the use case is the Hyperlink context menu
- if the full url is shown, I want to have the custom menu button "strip url"
- if only the document name is shown, I want to have the custom menu button "show url" 

of course this can be solved with 2 buttons, but anyway is there a way to access
the text of a button?

Regards,
Peter

 

[Dobromir]

Hi Peter,

The RadEditor's context menu's items are actually modified RadMenuItems and they inherit some of the client-side functionality of the RadMenu.

In order to modify the text of the context menu element client-side you can use get_text() / set_text() methods of the RadMenuItem.

Greetings,
Dobromir
the Telerik team

[Peter]

Hi Dobromir
thank you for your reply.

customTool.set_text("new text") shows the text over
the icon (see screen shot) instead of changing the text.

this is not what i want.

How do I access the custom tool in a way that
the new text is displayed the right way?

Greetings
Peter

[Dobromir]

Hi Peter,

Please accept my sincere apologies for the misleading information.

The RadEditor's context menus does not fully inherit the functionality of the RadMenuItem's. Nevertheless, you can change the text by directly modifying the content of the element holding the text, e.g.:

//1st child holds the icon, 2nd child holds the text
customItem.get_element().childNodes[1].innerHTML = "New Text";

Kind regards,
Dobromir
the Telerik team