How to get html element from radeditor upon right click????

[Rakesh]

Hi,

Can anybody help me to achieve my goal.
I am inserting a link inside the radeditor. after that when I am right clicking on it, it opens a context menu saying open hyperlink. upon choosing it I fire OnClientCommandExecuting() event. But I am not able to get the hyperlink element inside the function.
I already used
selectedvalue = editor.getSelectionHtml();

but its returning empty string.

Can anybody help me on this????

[Nikolay]

Hi,

Did you try editor.getSelectedElement()? It should return the hyperlink element.

See the RadEditor client-side API.

Regards,
Nikolay
Telerik

[Rakesh]

No its not working for me.
Currently I am using IE 10.
Please suggest some other way...

[Shinu]

Hi Rakesh,

Please try the following code snippet to achieve your scenario.

JavaScript:

<script type="text/javascript">
    function GetLink() {
        var editor = $find("<%=RadEditor1.ClientID %>");
        alert(editor.getSelectedElement().innerHTML);
        //or
        alert(editor.getSelection().getHtml());
    }
</script>

Thanks,
Shinu.

[Ianko]

Hello Rakesh,

From the provided information is difficult for me to determine what are the encountered difficulties.

If the desired achievement is to get the selected element when the user clicks the right mouse button, then you should attach the appropriate event and implement further the logic.

On my end the following implementation works fine:

<telerik:RadEditor runat="server" ID="RadEditor1"
    OnClientLoad="OnClientLoad">
</telerik:RadEditor>

<script type="text/javascript">
    function OnClientLoad(editor, args) {
        editor.attachEventHandler("onmousedown", function (e) {
            console.log(e.which);
            if (e.which && e.which === 3) {
                processRightClick(editor);
            }
        });
    }

    function processRightClick(editor) {
        var selectedElm = editor.getSelectedElement();
        if (selectedElm) {
            alert(selectedElm.outerHTML);
        }
    }
</script>

If I am mislead on the desired functionality and it is not related to the above implementation, please get back with more details about the experienced difficulties and the specific requirements of the expected results. 

Regards,
Ianko
Telerik

[Rakesh]

Hi Ianko ,
Thanks for the reply.
The code you submitted does not work for me.
What actually happens is that suppose I have 2-3 links inserted in the rad editor and I right click on any one of the link, for instance I right clicked on second one, then it opens a custom contex menu with "open-hyperlink". When we select open hyperlink in the context menu it fires
OnClientCommandExecuting() event where I want to get the hyperlink which I right clicked. I am not able to get that hyperlink.
Please provide me with the solution.

Thanks,
Rakesh Singh

[Ianko]

Hi Rakesh,

Try the following sample:

<telerik:RadEditor runat="server" ID="RadEditor1"
    OnClientCommandExecuting="OnClientCommandExecuting">
    <Content>
        <a href="htttp://www.telerik.com">Link 1</a><br />
        <a href="htttp://www.telerik.com">Link 2</a><br />
        <a href="htttp://www.telerik.com">Link 3</a><br />
    </Content>
    <ContextMenus>
        <telerik:EditorContextMenu TagName="A">
            <telerik:EditorTool Text="Open hyperlink" Name="CustomOpenHyperLink" />
        </telerik:EditorContextMenu>
    </ContextMenus>
</telerik:RadEditor>

<script type="text/javascript">
    Telerik.Web.UI.Editor.CommandList["CustomOpenHyperLink"] = function (commandName, editor, args) {
        var selElement = editor.getSelectedElement();
        alert("From custom tool: " + selElement.outerHTML);
    };

    function OnClientCommandExecuting(editor, args) {
        var commandName = args.get_commandName();
        console.log(commandName)
        if (commandName === "CustomOpenHyperLink") {
            var selElement = editor.getSelectedElement();
            alert("From OnClientCommandExecuting event: " + selElement.outerHTML);
        }
    }
</script>

Additionally you can find more information about the approaches used in the above example in these materials:

• Editor - Custom Tools;
• Editor - Context Menus;
• Editor - Client-side Events;
• OnClientCommandExecuting;
• getSelectedElement;
• getSelection;
  
  

If this does not help you, please provide more detailed information about:

• The desired results;
• What is the purpose of getting the anchor element?
• Do you need to modify it somehow?
• Do you need to modify the context menu?

Regards,
Ianko
Telerik

[Rakesh]

Hi,

Thanks for your reply and time you spending in my issue.
The solution you provided me does not works for me.
Code
var selElement = editor.getSelectedElement();
selElement.outerHTML;
returns me the entire content in the radeditor.
so if there are more then one link inside radeditor I will never come to know which one I have clicked.

My requirement is that when I right click on any hyperlink the it will open an context menu with an option openhyperlink and upon selecting it I should get the particular the right clicked link element, after this I need to manipulate the link by taking href and name value and open an dialogue box with the some data.
Problem here is I am not getting the specific link upon which I right clicked.
In your case I am getting the entire content of radeditor.
Hope I made myself clear.

Thanks,
Rakesh Singh


[Shinu]

Hi Rakesh,

Please have a look into the following JavaScript which works fine at my end.

JavaScript:

<script type="text/javascript">
function OnClientCommandExecuting(editor, args) {
    var commandName = args.get_commandName();
    if (commandName === "CustomOpenHyperLink") {
        var selElement = editor.getSelection().getHtml();
        alert("From OnClientCommandExecuting event: " + selElement);
    }
}
</script>

Hope this will helps you.
Thanks,
Shinu.

[Niko]

Hello Rakesh,

The solution that my colleague Ianko has suggested seems to be working just the way you described it. Please, check the following screencast - http://screencast.com/t/Uv3M6Pn30vP.

Regards,
Niko
Telerik

[Richard]

Hello;

We are having the same problem in IE10. Your demo shows Firefox. In Firefox the correct element is selected. in IE10 the entire content is selected. I believe the original poster mentioned as well their issue is in IE10 specifically.

Thanks,

Rich

[Richard]

We also get the same results in IE8 and IE9. In IE8, IE9, and IE10 the entire html content of the editor is returned by editor.getSelectedElement(). In Firefox the anchor tag is correctly returned by editor.getSelectedElement().

[Richard]

Correction: It does not work in IE10 emulating IE8. IE8 works fine (just tested via a virtual pc instance). I am still waiting for the IE9 VM to fire up - I will update shortly with results.

[Richard]

IE9 has the same behavior as IE10 (entire root content element is returned, not the anchor tag). Only IE8 functions correctly.

[Richard]

I realized I've hijacked this thread, and the title is misleading anyways (does not really address the issue). I've created a new thread to deal with the issue here: http://www.telerik.com/forums/permalink/HDrYCYGPY0KR8AMHkkMoDg