Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » InsertOrEditLink with specific style

InsertOrEditLink with specific style Options
Previous Topic · Next Topic
karn
Posted: Tuesday, February 9, 2010 7:37:07 AM
Rank: Advanced Member
Groups: Member

Joined: 10/20/2008
Posts: 39
hello,

i want add a url with a style wtih a specific control(and other control add url with normal style).

Presently i add the url with InsertOrEditLink, i get the html with getHtml into a div, i get all element "a" who have a href specific for the style and add the style.

I reinjected the html into the editor with set HTML. it is working fine, except that the cursor and the scrollbar go up... this is not practical

It impossible to add a id, a class, or style with InsertOrEditLink?
Or any idea for my problem for add url with specific style?
Back to top
 
eo_support
Posted: Tuesday, February 9, 2010 11:45:41 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

You can try to use getCurrentElement to get the "current" element and then modify the related elements directly through the DOM tree. The function usually returns the current selected element to you but it may return null from time to time. So make sure you check for that. If it returns null, it usually means the focus is not in the editor.

Thanks!
Back to top
 
karn
Posted: Tuesday, February 9, 2010 1:43:17 PM
Rank: Advanced Member
Groups: Member

Joined: 10/20/2008
Posts: 39
Thank,

have you any example of code for use getCurrentElement ? my test doesn't work very well and i don't find any example on the forum
Back to top
 
karn
Posted: Tuesday, February 9, 2010 2:04:33 PM
Rank: Advanced Member
Groups: Member

Joined: 10/20/2008
Posts: 39
Ok i include my control in editor and it works better, but is not perfect, when i use getCurrentElement, is not my "a href" who has be created but the element p where my link has been created has selected...
My code who call after insertEditLink

Quote:
function FormatingLink() {


var recupHtml = document.getElementById("recupHtml");

var editor = eo_GetObject("Editor1");


editor.getCurrentElement().style.backgroundColor = '#888888';


}
Back to top
 
eo_support
Posted: Tuesday, February 9, 2010 3:37:32 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

getCurrentElement is not guaranteed to be your href. It's only a starting point for you to access the DOM directly. Once you have the DOM tree, you can try to locate your href and then change it accordingly. This way you avoid replacing the whole HTML of the editor.

Thanks!
Back to top
 
karn
Posted: Wednesday, February 10, 2010 4:42:53 AM
Rank: Advanced Member
Groups: Member

Joined: 10/20/2008
Posts: 39
ok i do this

var recupHtml = document.getElementById("recupHtml");

var editor = eo_GetObject("Editor1");
var recupElm = editor.getCurrentElement()
var link = recupElm.getElementsByTagName("a");

for (var i = 0; i < link.length; i++) {

link[i].style.backgroundColor = '#888888';

}

It 's work exept when the selected text was bold, italic or underline, getCurrentElement() return null... how fix that?

thank!
Back to top
 
eo_support
Posted: Wednesday, February 10, 2010 9:22:30 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

There isn't much you can do when getCurrentElement returns null. But are you sure its recupElm is null or link is null?

Thanks
Back to top
 
karn
Posted: Wednesday, February 10, 2010 9:49:36 AM
Rank: Advanced Member
Groups: Member

Joined: 10/20/2008
Posts: 39
unfortunately this is recupElm is null...
when i select entirely a bold element, it is null...

so what i can i do? any issue?


Quote:

var editor = eo_GetObject("Editor1");

var recupElm = editor.getCurrentElement()


alert(recupElm);
Back to top
 
eo_support
Posted: Wednesday, February 10, 2010 9:55:03 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

Please try to create a full test page and we will try to run it here and see what we can find.

Thanks!
Back to top
 
karn
Posted: Wednesday, February 10, 2010 10:05:47 AM
Rank: Advanced Member
Groups: Member

Joined: 10/20/2008
Posts: 39
Ok thank,

this his my code :

Quote:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="eo_for_test.aspx.vb" Inherits="chart_test_export.eo_for_test" %>
<%@ Register TagPrefix="eo" NameSpace="EO.Web" Assembly="EO.Web" %>

<!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>

<script language="JavaScript" type="text/javascript">

function recup() {

AddItem('definition 1', '1');
AddItem('definition 2', '2');
AddItem('definition 3', '3');
AddItem('definition 4', '4');
AddItem('definition 5', '5');
AddItem('definition 6', '6');
}

function AddItem(Text,Value)
{

var opt = document.createElement("option");
document.getElementById("mylist").options.add(opt);

opt.text = Text;
opt.value = Value;

}

function SelectItem() {
Mylist = document.getElementById("mylist");
urlSelect = document.getElementById("urlSelect");
var w = Mylist.selectedIndex;

var selected_text = Mylist.options[w].value;
urlSelect.value = 'glossaire?id=' + selected_text;
}

function FormatingLink() {


var recupHtml = document.getElementById("recupHtml");

var editor = eo_GetObject("Editor1");


var recupElm = editor.getCurrentElement()
alert(recupElm);
var link = recupElm.getElementsByTagName("a");
for (var i = 0; i < link.length; i++) {

link[i].style.backgroundColor = '#888888';


}



}

</script>

</head>
<body onload="recup()">
<form id="form1" runat="server">
<div>
<eo:Editor runat="server" id="Editor1" Width="700px" HighlightColor="255, 255, 192" Height="720px"
ToolBarSet="Basic" HtmlBodyCssClass="demo_editor_body" Html="<p>This sample customizes both&amp;nbsp;the default&amp;nbsp;dialog template and individual dialogs. Click <i>Insert Image</i> or <i>Insert Link</i> button on the toolbar to view the modified dialogs.</p>&#13;&#10;<p>Property <strong>DialogTemplates</strong> property is used to customize the default dialog template, which is used to define the look and feel of all dialogs. </p>&#13;&#10;<p>Property <strong>DialogContents</strong> is used provide two custom dialogs: <strong>Insert&amp;nbsp;Link </strong>and <strong>Insert Image</strong>.</p>&#13;&#10;<p>Please see the sample source as well as related documentation for more details about this&amp;nbsp;feature.&amp;nbsp;</p>&#13;&#10;"
TextAreaCssFile="~\EOWebDemo.css">
<FooterStyle CssText="border-right: gray 1px solid; padding-right: 2px; border-top: gray 1px; padding-left: 2px; padding-bottom: 2px; border-left: gray 1px solid; padding-top: 2px; border-bottom: gray 1px solid; background-color: #fafafa"></FooterStyle>
<BreadcrumbLabelStyle CssText="padding-right: 6px; padding-left: 6px; font-size: 12px; padding-top: 1px; font-family: tahoma"></BreadcrumbLabelStyle>
<EditAreaStyle CssText="border-right: gray 1px solid; padding-right: 0px; border-top: gray 1px solid; padding-left: 0px; padding-bottom: 0px; border-left: gray 1px solid; padding-top: 0px; border-bottom: gray 1px solid"></EditAreaStyle>
<DialogContents>
<eo:EditorDialogContent CommandName="InsertOrEditLink" >
<ContentTemplate>
<table cellSpacing="3" cellPadding="1" border="0">
<tr>


<td>Text:</td>
<td>
<select id="listGloss" name="mylist" onchange="SelectItem();">

</select>
</td>

</tr>
<tr>
<td width="60px" nowrap="nowrap">Url:</td>
<td colspan="3">
<input type="text" id="urlSelect" name="eo_editor_insertlink_url" style="width:250px;" />
</td>
</tr>
<tr>
<td>Text:</td>
<td>
<input type="text" name="eo_editor_insertlink_text" style="width:250px;" />
</td>


</tr>
<tr>
<td align="right" colspan="2">
<input type="button" name="eo_editor_default_button" value="OK" style="width:80px;" onclick="eo_GetContainer(this, 'Editor').execDialogCommand('InsertOrEditLink', this, event);FormatingLink();" />&nbsp;
<input type="button" value="Close" style="width:80px;" onclick="eo_GetContainer(this, 'Editor').closeDialog(this, event);" />
</td>
</tr>
</table>
</ContentTemplate>
</eo:EditorDialogContent>
<eo:EditorDialogContent CommandName="InsertOrEditImage">
<ContentTemplate>
<table cellSpacing="3" cellPadding="1" border="0">
<tr>
<td width="60px" nowrap="nowrap">Url:</td>
<td colspan="3">
<input type="text" name="eo_editor_insertimage_url" style="width:250px;" />
</td>
</tr>
<tr>
<td align="right" colspan="4">
<input type="button" name="eo_editor_default_button" value="OK" style="width:80px;" onclick="eo_GetContainer(this, 'Editor').execDialogCommand('InsertOrEditImage', this, event);" />&nbsp;
<input type="button" value="Close" style="width:80px;" onclick="eo_GetContainer(this, 'Editor').closeDialog(this, event);" />
</td>
</tr>
</table>
</ContentTemplate>
</eo:EditorDialogContent>
</DialogContents>
<HeaderStyle CssText="border-right: gray 1px solid; border-top: gray 1px solid; border-left: gray 1px solid; border-bottom: gray 1px"></HeaderStyle>
<EmoticonStyle CssText="background-color:white;border-bottom-color:#c5d3ed;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#c5d3ed;border-left-style:solid;border-left-width:1px;border-right-color:#c5d3ed;border-right-style:solid;border-right-width:1px;border-top-color:#c5d3ed;border-top-style:solid;border-top-width:1px;padding-bottom:2px;padding-left:2px;padding-right:2px;padding-top:2px;"></EmoticonStyle>
<BreadcrumbItemHoverStyle CssText="border-right: darkgray 1px solid; padding-right: 3px; border-top: darkgray 1px solid; margin-top: 1px; padding-left: 3px; font-size: 12px; padding-bottom: 1px; border-left: darkgray 1px solid; padding-top: 1px; border-bottom: darkgray 1px solid; font-family: tahoma; background-color:#e0e0e0;"></BreadcrumbItemHoverStyle>
<TabButtonStyles>
<SelectedStyle CssText="border-right: #335ea8 1px solid; padding-right: 6px; border-top: #335ea8 1px solid; padding-left: 6px; font-size: 12px; padding-bottom: 2px; border-left: #335ea8 1px solid; padding-top: 2px; border-bottom: #335ea8 1px solid; font-family: tahoma; background-color: white"></SelectedStyle>
<NormalStyle CssText="border-right: #335ea8 1px; padding-right: 7px; border-top: #335ea8 1px; padding-left: 7px; font-size: 12px; padding-bottom: 3px; border-left: #335ea8 1px; padding-top: 3px; border-bottom: #335ea8 1px; font-family: tahoma; background-color: white"></NormalStyle>
<HoverStyle CssText="border-right: #335ea8 1px solid; padding-right: 6px; border-top: #335ea8 1px solid; padding-left: 6px; font-size: 12px; padding-bottom: 2px; border-left: #335ea8 1px solid; padding-top: 2px; border-bottom: #335ea8 1px solid; font-family: tahoma; background-color: #c2cfe5"></HoverStyle>
</TabButtonStyles>
<DialogTemplates>
<eo:EditorDialogTemplate>
<DialogTemplate>
<eo:Dialog runat="server" id="Dialog1" Width="168px" BorderWidth="1px" BorderStyle="Solid"
ControlSkinID="None" BorderColor="#728EB8" HeaderHtml="Dialog title" BackColor="White"
CloseButtonUrl="00070201">
<HeaderStyleActive CssText="padding-right: 4px; padding-left: 4px; font-size: 11px; background-image: url(00070202); padding-bottom: 2px; padding-top: 2px; font-family: arial"></HeaderStyleActive>
<ContentStyleActive CssText="padding-right: 4px; padding-left: 4px; font-size: 11px; padding-bottom: 4px; padding-top: 4px; font-family: verdana; background-color: #f8fafd"></ContentStyleActive>
</eo:Dialog>
</DialogTemplate>
</eo:EditorDialogTemplate>
</DialogTemplates>
<BreadcrumbDropDownStyle CssText="border-top: gray 1px solid; border-right: gray 1px solid; padding-right: 2px; border-top: gray 1px; padding-left: 2px; padding-bottom: 2px; border-left: gray 1px solid; padding-top: 2px; border-bottom: gray 1px solid; background-color: #fafafa"></BreadcrumbDropDownStyle>
<BreadcrumbItemSeparatorStyle CssText="width: 3px; height: 10px"></BreadcrumbItemSeparatorStyle>
<EmoticonDropDownStyle CssText="border-top: gray 1px solid; border-right: gray 1px solid; padding-right: 2px; border-top: gray 1px; padding-left: 2px; padding-bottom: 2px; border-left: gray 1px solid; padding-top: 2px; border-bottom: gray 1px solid; background-color: #fafafa"></EmoticonDropDownStyle>
<BreadcrumbItemStyle CssText="border-right: darkgray 1px solid; padding-right: 3px; border-top: darkgray 1px solid; margin-top: 1px; padding-left: 3px; font-size: 12px; padding-bottom: 1px; border-left: darkgray 1px solid; padding-top: 1px; border-bottom: darkgray 1px solid; font-family: tahoma"></BreadcrumbItemStyle>
</eo:Editor>
</div>
</form>
</body>
</html>
Back to top
 
karn
Posted: Thursday, February 11, 2010 5:31:44 AM
Rank: Advanced Member
Groups: Member

Joined: 10/20/2008
Posts: 39
Hello,

have you any news?

thank.
Back to top
 
eo_support
Posted: Thursday, February 11, 2010 2:46:27 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

I see what you are trying to do. getCurrentElement returns null because the Editor does not have focus yet. Beside there is no guarantee that the "current element" will be the newly added link once focus returns to the Editor. We will enhance execDialogCommand method to return you the link object directly. That way you can just take the return value of the link object ("a" object) and modify it whichever way you want. We will let you know when the new build is ready.

Thanks!
Back to top
 
karn
Posted: Thursday, February 11, 2010 4:04:21 PM
Rank: Advanced Member
Groups: Member

Joined: 10/20/2008
Posts: 39
you are great thanks!
Back to top
 
eo_support
Posted: Friday, February 12, 2010 5:02:27 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

We have posted a new build that enhanced execDialogCommand function to return the newly created element. So you can now do something like this:

Code: C# 
FormatLink(eo_GetContainer(this, 
    'Editor').execDialogCommand('InsertOrEditLink', this, event));

function FormatLink(link)
{
    link.style.color = "red";
    ......
}

Thanks!
Back to top
 
karn
Posted: Monday, February 15, 2010 6:24:18 AM
Rank: Advanced Member
Groups: Member

Joined: 10/20/2008
Posts: 39
Thank that work! (it's much cleaner solution)

but i have strange bug, when i selected a paragrah who owns bold,italic or underline, the link was created under my selection and the element with bold, italic just above.

A solution maybe clear the text of any style element?how i cacht this text?

Thank.
Back to top
 
eo_support
Posted: Monday, February 15, 2010 10:20:25 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

That often occurs when your selection spans different level in the DOM tree. In that case there is no simple straight way to replace the selection because it does not belong to a single branch. Clearing styles can help but ultimately as long as the selection is not within a single branch you will have this issue. Thus there is no easy solution.

To clean up the styles, you can call getBody method on the editor object, which gives you the root body element. You can then have access to the whole editor contents and do whatever changes you want to do.

Thanks!
Back to top
 


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.