This is a migrated thread and some comments may be shown as answers.

How to check "A" element in nested html

6 Answers 146 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Vincent
Top achievements
Rank 1
Vincent asked on 21 Jun 2010, 12:26 AM
Hi Telerik Team

I had difficulty to detect a tag in nested html. e.g.  My current html tag is below

<href="http://google.com" title="test" name="test "><img alt="" src="/dbimg/70/14/NoSP1.gif" /></a

I am trying to popup my custom dialog box and load the existing values from the current "a" tag. somehow, when I use getSelectedElement() or selection.getParentElement(), the return result of tagName is always "IMG", can someone tell me how to achieve this?

6 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 21 Jun 2010, 01:17 PM
Hello Vincent,

When you click over a linked image, the selected element is the IMG one and for this reason the getSelectedElement() method returns as a value the <img> object.

What you could do is to check whether the parent element of the image tag is a link and to select it, e.g.

var selectedElement = editor.getSelectedElement();
if (selectedElement.tagName == "IMG" && selectedElement.parentNode.tagName == "A")
{
    editor.selectElement(selectedElement.parentNode);
}

or

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientSelectionChange="OnClientSelectionChange">
    <Content>
        <a href="something.aspx">some random text</a><br/>
        <a href="asdf"><img src="emptyimage.jpg" width="100" height="100"/></a><br/>
        <a href="something.aspx"><span>text in span</span></a><br/>
    </Content>
</telerik:RadEditor>
 
<script type="text/javascript">
    function OnClientSelectionChange(editor, args)
    {
        var sElem = editor.getSelectedElement();
        alert(getParentLink(sElem));
    }
 
    function getParentLink(el)
    {
        while (el.tagName != "A" && el.tagName != "BODY")
        {
            el = el.parentNode;
        }
 
        if (el.tagName == "BODY") return false
        else return el;
    }
</script>

I hope this helps.


Best regards,
Rumen
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
0
Vincent
Top achievements
Rank 1
answered on 01 Jul 2010, 02:32 PM
Hi Rumen

the sample you provide doesn't work quite well under IE.

Let me describe what I want to achive first. I want user able to insert a link on the image by my custom window popup. If there is no hyperlink out of the current img tag, everything is simple, I just make a call to editor.getSelectionHtml(), and then wrap the img tag with the hyperlink with some additional hyperlink attribute.
The problem I am having now is once customer click an image that has a hyperlink out of it, I need to extract "title, name, href, protocol, and of course innerHTML" from current selection.

Issue:

The first approch you provided working fine under Firefox, I can see title,name href, protocol etc values loaded into selectedElement, but I can't see these value in IE. So under IE, how can I extract these values ?

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadEditorWebForm.aspx.cs" Inherits="RadEditorWebForm" %> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"
<head runat="server"
    <title></title
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" /> 
     <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script>          
    <style type="text/css"
        .reTool .InsertCustomDate 
        { 
            background-image: url(Icons/InsertDate.gif); 
        } 
        .reTool .ApplySizeColor 
        { 
            background-image: url(Icons/Custom.gif); 
        } 
        .reTool .ResetContent 
        { 
            background-image: url(Icons/Cancel.gif); 
        } 
    </style> 
 
</head> 
<body> 
    <form id="form1" runat="server"
    
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
        <Scripts> 
            <%--Needed for JavaScript IntelliSense in VS2010--%> 
            <%--For VS2008 replace RadScriptManager with ScriptManager--%> 
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> 
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> 
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" /> 
        </Scripts> 
    </telerik:RadScriptManager> 
    <script type="text/javascript"
//<![CDATA[
        Telerik.Web.UI.Editor.CommandList["ApplySizeColor"] = function (commandName, editor, args) {
            //openTestWindow();
            //return false;
            var elem = editor.getSelectedElement(); //returns the selected element.
            if (elem.tagName == "A") {
                editor.selectElement(elem);
                argument = elem.cloneNode(true);
            }
            else {
                var content = editor.getSelectionHtml();
                var link = editor.get_document().createElement("A");
                link.innerHTML = content;
                argument = link;
            }
            var myCallbackFunction = function (sender, args) {
                editor.pasteHyperLink(args, "Insert Link");
            }
            editor.showExternalDialog(
            "custompopup.aspx",
            argument,
            270,
            300,
            myCallbackFunction,
            null,
            "Insert Link",
            true,
            Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
            false,
            true);
        };
        Telerik.Web.UI.Editor.CommandList["InsertCustomDate"] = function (commandName, editor, args) {
            editor.pasteHtml('<span style="width:200px;border: 1px dashed #bb0000;background-color: #fafafa;color: blue;"> ' + new Date() + ' </span>');
        };
        Telerik.Web.UI.Editor.CommandList["ResetContent"] = function (commandName, editor, args) {
            editor.set_html(""); //set empty content
        };
        //]]> 
        
 
    </script> 
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
        <AjaxSettings> 
            <telerik:AjaxSetting AjaxControlID="Panel1"
                <UpdatedControls> 
                    <telerik:AjaxUpdatedControl ControlID="Panel1" /> 
                </UpdatedControls> 
            </telerik:AjaxSetting> 
        </AjaxSettings> 
    </telerik:RadAjaxManager> 
    <div> 
        <asp:PlaceHolder runat="server" > 
    <script type="text/javascript"
        var smEditor = "aaaaa"
        function openTestWindow() { 
            var oWnd = $find("<%= rw.ClientID %>"); 
            editor = $find("<%= RadEditor1.ClientID %>"); 
            var editordata = escape(editor.get_html(false)); 
 
            smEditor = editordata
            alert(editordata.length); 
            oWnd.show(); 
            oWnd.setSize(400, 400); 
            oWnd.setUrl("Default2.aspx?content="); 
        } 
        function loadEditorContent() { 
            smEditor = $find("<%=RadEditor1.ClientID %>").get_html(false); 
        } 
 
        function OnClientSelectionChange(editor, args) { 
            var sElem = editor.getSelectedElement(); 
            var ele = getParentLink(sElem); 
 
            if (ele == false) { 
                var text = editor.getSelection().getText(); 
                var selection = editor.getSelection(); 
                alert(text); 
            } 
            else { 
                var selection = ele.getSelection(); 
            } 
/* 
            if (ele == false) { 
                alert(sElem.title); 
                alert(sElem.href); 
                alert(sEelm.innerHTML); 
            } 
            alert(ele.title); 
            alert(ele.href); 
            alert(ele.innerHTML); 
            //getParentLink(sElem); 
*/ 
        } 
 
        function getParentLink(el) { 
            while (el.tagName != "A" && el.tagName != "BODY") { 
                elel = el.parentNode;                 
            } 
 
            if (el.tagName == "BODY") {                 
                return false 
            } 
            else return el; 
        } 
    </script> 
    </asp:PlaceHolder> 
    <telerik:RadWindow ID="rw" runat="server" > 
         
    </telerik:RadWindow> 
        <asp:Panel ID="Panel1" runat="server"
            <telerik:RadEditor Height="300px" ID="RadEditor1" EnableResize="false" 
            style="margin-top: 100px" ToolbarMode="Default" EnableViewState="false" runat="server" OnClientLoad="loadEditorContent" > 
                <Modules> 
                    <telerik:EditorModule Visible="false" /> 
                </Modules> 
                <Tools> 
                <telerik:EditorToolGroup> 
                            <telerik:EditorTool Name="ApplySizeColor" Text="Apply Size and Color" /> 
                            <telerik:EditorTool Name="InsertCustomDate" Text="Insert Custom Date" /> 
                             <telerik:EditorTool Name="ResetContent" Text="Reset Content" /> 
                               
 
                    </telerik:EditorToolGroup> 
                     
                </Tools> 
                <Content> 
                    <href="something.aspx">some random text</a><br/> 
                    <href="http://www.google.com" title="this is title"><img src="emptyimage.jpg" width="100" height="100"/></a><br/> 
                    <href="something.aspx"><span>text in span</span></a><br/> 
                </Content> 
            </telerik:RadEditor> 
        </asp:Panel> 
    </div> 
    </form> 
</body> 
</html> 
 





0
Vincent
Top achievements
Rank 1
answered on 02 Jul 2010, 08:51 AM
Hi Telerik team,

can someone help this out?
0
Dobromir
Telerik team
answered on 06 Jul 2010, 04:37 PM
Hi Vincent,

I am not quite sure I understand the exact scenario. Are you trying to create a custom dialog using the showExternalDialog() method, or you are trying to implement dialog functionality using RadWindow? In the provided page code you have both approaches (openTestWindow() function is never called but you say that : "I want user able to insert a link on the image by my custom window popup") - the recommended approach is to open a custom dialog.

Regarding the following:

The first approch you provided working fine under Firefox, I can see title,name href, protocol etc values loaded into selectedElement, but I can't see these value in IE.

In the provided page I cannot find an implementation of the first workaround suggest by Rumen. Are you referring to the OnClientSelectionChange function? If so, there are couple of issues in the code:
  1. The event handler is not attached to the editor
  2. The following line throws a JavaScript error:
    var selection = ele.getSelection();
    this is because getSelection() is RadEditor's method
When these two problems are fixed the values are alerted correctly.

For your convenience I have attached a sample page demonstrating RadEditor's with InsertCustomLink custom dialog with the workaround implemented.


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
0
Vincent
Top achievements
Rank 1
answered on 11 Jul 2010, 11:17 AM
Hi Dobromir

First, thanks for your explanation. Unfortunately, I'd like to implement dialog functionality using RadWindow rather than using ShowExternalDialog function.

I've re-written new code to achieve it, but it seems only works under Firefox, IE still have a strange behavior.

Here is my parent window

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="EditorTest.aspx.cs" Inherits="EditorTest" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<head runat="server">
    <title></title>
    <style type="text/css">
        .reTool .InsertCustomDate
        {
            background-image: url(Icons/InsertDate.gif);
        }
        .reTool .ApplySizeColor
        {
            background-image: url(Icons/Custom.gif);
        }
        .reTool .ResetContent
        {
            background-image: url(Icons/Cancel.gif);
        }
    </style>
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
</head>
<body>
    <form id="form1" runat="server">
     
 
    
 
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <%--Needed for JavaScript IntelliSense in VS2010--%>
            <%--For VS2008 replace RadScriptManager with ScriptManager--%>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
 
 
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Panel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
 
    <telerik:RadWindow ID="rw" runat="server" OnClientClose="clientClose" OnClientShow="clientShow" Modal="true">
 
    </telerik:RadWindow>
    <div>
        <asp:Panel ID="Panel1" runat="server">
            <telerik:RadEditor Height="300px" ID="RadEditor1" EnableResize="false"
            style="margin-top: 100px" ToolbarMode="Default" EnableViewState="false" runat="server">
                <Modules>
                     
                    <telerik:EditorModule Name="RadEditorHtmlInspector" Enabled="true" Visible="false" />
                    <telerik:EditorModule Name="RadEditorDomInspector" Enabled="true" />
                        <telerik:EditorModule Name="RadEditorNodeInspector" Enabled="true" Visible="false" />
 
                </Modules>
                <Tools>
                <telerik:EditorToolGroup>
                            <telerik:EditorTool Name="ApplySizeColor" Text="Apply Size and Color" />
                            <telerik:EditorTool Name="InsertCustomDate" Text="Insert Custom Date" />
                             <telerik:EditorTool Name="ResetContent" Text="Reset Content" />
                               
 
                    </telerik:EditorToolGroup>
                </Tools>
                <Content>
                    <a href="something.aspx">some random text</a><br/>
                    <a href="http://www.google.com" title="this is title"><img src="emptyimage.jpg" width="100" height="100"/></a><br/>
                    <img src="emptyimage.jpg" width="100" height="100"/>
                    <a href="something.aspx"><span>text in span</span></a><br/>               
                </Content>
            </telerik:RadEditor>
        </asp:Panel>
    </div>
 
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script type="text/javascript">
        function clientShow(sender, eventArgs) {
 
            sender.argument = argument;
            //alert(sender.argument.innerHTML);
        }
        var argument;
        var smeditor;
//<![CDATA[
        Telerik.Web.UI.Editor.CommandList["ApplySizeColor"] = function (commandName, editor, args) {
 
            var elem = editor.getSelectedElement(); //returns the selected element.
            smeditor = editor;
            //img fix
            if (getParentLink(elem)) {
                elem = getParentLink(elem);
            }
            //end img fix
 
            if (elem.tagName == "A") {
                editor.selectElement(elem);
                argument = elem.cloneNode(true);
                //Sys.Debug.traceDump(argument);
                //alert(argument.innerHTML);
            }
            else {
                var content = editor.getSelectionHtml();
                var link = editor.get_document().createElement("A");
                link.innerHTML = content;
                argument = link;
 
 
            }
 
             
            var oWnd = $find("<%= rw.ClientID %>");
            oWnd.setUrl("radwindowpopup.aspx");
            oWnd.show();
             
             
 
        };
        function clientClose(sender, args) {
            //var editor = $find("<%=RadEditor1.ClientID %>");
 
 
            if (args.get_argument() != null) {
                //alert(args.innerHTML);
                 
                alert(args._argument.innerHTML);
                alert("'" + sender.get_name() + "'" + " was closed and returned the following argument: '" + args.get_argument() + "'");
            }
            smeditor.pasteHyperLink(args._argument, "Insert Link");
        }
        function getParentLink(el) {
            while (el.tagName != "A" && el.tagName != "BODY") {
                el = el.parentNode;
            }
 
            if (el.tagName == "BODY") return false
            else return el;
        }
 
        //]]>
        
 
    </script>
     </telerik:RadScriptBlock>
    </form>
</body>
</html>

Here is my popup window

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="radwindowpopup.aspx.cs" Inherits="radwindowpopup" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<head runat="server">
    <title></title>
    <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <%--Needed for JavaScript IntelliSense in VS2010--%>
            <%--For VS2008 replace RadScriptManager with ScriptManager--%>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <script type="text/javascript">
        //Put your JavaScript code here.
    </script>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
<fieldset style="width: 220px; height: 192px">
        Link name:
        <input type="text" id="linkName" /><br />
        Link URL:
        <input type="text" id="linkUrl" /><br />
        Link target:
        <input type="text" id="linkTarget" /><br />
        Link class:
        <input type="text" id="linkClass" /><br />
        <input type="button" onclick="javascript:insertLink();" value="Insert Link" />
    </fieldset>
 
    <script type="text/javascript">
        if (window.attachEvent) {
            window.attachEvent("onload", initDialog);
        }
        else if (window.addEventListener) {
            window.addEventListener("load", initDialog, false);
        }
 
 
        var linkUrl = document.getElementById("linkUrl");
        //alert(linkUrl.innerHTML);
        var linkTarget = document.getElementById("linkTarget");
        var linkClass = document.getElementById("linkClass");
        var linkName = document.getElementById("linkName");
 
        var workLink = null;
 
        function getRadWindow() {
            var oWindow = null;
            if (window.radWindow)
                oWindow = window.radWindow;
            else if (window.frameElement.radWindow)
                oWindow = window.frameElement.radWindow;
            return oWindow;
        }
 
        function initDialog() {
            alert(getRadWindow().BrowserWindow.argument.innerHTML);
            var clientParameters = getRadWindow().argument; //return the arguments supplied from the parent page
            //Sys.Debug.traceDump(clientParameters.href);
            linkUrl.value = clientParameters.href;
            linkTarget.value = clientParameters.target;
            linkClass.value = clientParameters.className;
            linkName.value = clientParameters.innerHTML;
 
            workLink = getRadWindow().BrowserWindow.argument;
        }
 
        function insertLink() //fires when the Insert Link button is clicked
        {
            //create an object and set some custom properties to it     
            workLink.href = linkUrl.value;
            workLink.target = linkTarget.value;
            workLink.className = linkClass.value;
            workLink.innerHTML = linkName.value;
            //alert(workLink.href);
            alert(workLink.innerHTML);
            //getRadWindow().close("test");
            getRadWindow().close(workLink);
            //getRadWindow().close(workLink); //use the close function of the getRadWindow to close the dialog and pass the arguments from the dialog to the callback function on the main page.
        }
    </script>
 
    </form>
</body>
</html>

Can someone point me out the solution for this?

Many thanks
0
Dobromir
Telerik team
answered on 14 Jul 2010, 01:13 PM
Hi Vincent,

Thank you for the provided sample page.

If the strange behavior that you are referring to is that the modified link is inserted at the start of the content of RadEditor. This problem occurs because the current selection is lost when the RadWindow is opened. To avoid this behavior you need to store the cursor position before opening the window and restore it in the callback function (clientClose()) using getRange() and selectRange() RadEditor's selection client-side methods.

For your convenience I have attached the sample page with the required modification.

If this is not the case, could you please describe in details what is the exact problem?

Regards,
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
Tags
Editor
Asked by
Vincent
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Vincent
Top achievements
Rank 1
Dobromir
Telerik team
Share this question
or