Hi Telerik Team
I had difficulty to detect a tag in nested html. e.g. My current html tag is below
| <a 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
0
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
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
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 ?
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> |
| <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/> |
| <a 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
Rank 1
answered on 02 Jul 2010, 08:51 AM
Hi Telerik team,
can someone help this out?
can someone help this out?
0
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:
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
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:
- The event handler is not attached to the editor
- The following line throws a JavaScript error:
var selection = ele.getSelection();
this is because getSelection() is RadEditor's method
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
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
Here is my popup window
Can someone point me out the solution for this?
Many thanks
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"><html xmlns="http://www.w3.org/1999/xhtml"><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"><html xmlns="http://www.w3.org/1999/xhtml"><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
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
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