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

15 posts, 0 answers
  1. Rakesh
    Rakesh avatar
    4 posts
    Member since:
    Dec 2013

    Posted 23 Dec 2013 Link to this post

    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????
  2.
  3. Nikolay
    Admin
    Nikolay avatar
    104 posts

    Posted 26 Dec 2013 Link to this post

    Hi,

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

    See the RadEditor client-side API.

    Regards,
    Nikolay
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  5. Rakesh
    Rakesh avatar
    4 posts
    Member since:
    Dec 2013

    Posted 26 Dec 2013 Link to this post

    No its not working for me.
    Currently I am using IE 10.
    Please suggest some other way...
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 26 Dec 2013 Link to this post

    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.

  8.
  9. Ianko
    Admin
    Ianko avatar
    1949 posts

    Posted 27 Dec 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  11. Rakesh
    Rakesh avatar
    4 posts
    Member since:
    Dec 2013

    Posted 30 Dec 2013 Link to this post

    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
  13. Ianko
    Admin
    Ianko avatar
    1949 posts

    Posted 30 Dec 2013 Link to this post

    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:

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  15. Rakesh
    Rakesh avatar
    4 posts
    Member since:
    Dec 2013

    Posted 30 Dec 2013 Link to this post

    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

  17. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 31 Dec 2013 Link to this post

    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.
  19. Niko
    Admin
    Niko avatar
    404 posts

    Posted 02 Jan 2014 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  21. Richard
    Richard avatar
    15 posts
    Member since:
    Feb 2014

    Posted 10 Feb 2014 in reply to Niko Link to this post

    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
  23. Richard
    Richard avatar
    15 posts
    Member since:
    Feb 2014

    Posted 10 Feb 2014 in reply to Richard Link to this post

    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().
  25. Richard
    Richard avatar
    15 posts
    Member since:
    Feb 2014

    Posted 10 Feb 2014 in reply to Richard Link to this post

    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.
  26.
  27. Richard
    Richard avatar
    15 posts
    Member since:
    Feb 2014

    Posted 10 Feb 2014 in reply to Richard Link to this post

    IE9 has the same behavior as IE10 (entire root content element is returned, not the anchor tag). Only IE8 functions correctly.
  29. Richard
    Richard avatar
    15 posts
    Member since:
    Feb 2014

    Posted 10 Feb 2014 in reply to Richard Link to this post

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