I'm having a similar problem in that the editor loses focus during hyperlink insertion and then pastes the link in at the beginning of the editor window. I am doing something different however. I created a custom button that launches an ASP.Net AJAX modal popup control wherein I enter the display text and the URL. I click a button on this modal popup and some more javascript takes the display text and URL, formats them into hyperlink markup, and then pastes them into the CuteSoft editor. As I said however the editor loses focus during this process and thus pastes the hyperlink into the beginning of the editor window.
Is there any way around this? Is there some way that I can capture the cursor position in the editor before all this scripting occurs so that the cursor can be repositioned where it was just before the pasting of the hyperlink?
It is worth mentioning that I can still see the cursor in the editor while the modal popup is visible and it is in the correct position. The editor only seems to lose focus when I actually click on a button in the modal popup.
Here is all the relevant VB.Net, JavaScript, and Markup:
Here is how I create the custom button:
Sub
Page_Load()
Dim
ctrl As System.Web.UI.WebControls.WebControl
ctrl = Editor1.CreateCommandButton(
"hyperlink", "link.gif", "Insert Link")
ctrl.Attributes(
"onclick") = "LaunchInsertHyperlink(this)"
Editor1.RegisterCustomButton(
"hyperlink", ctrl)
End
Sub
Here is the javascript that is invoked when the custom toolbar button is clicked (it programmatically "clicks" a hidden button that launches the modal popup):
function
LaunchInsertHyperlink()
{
document.getElementById(
'ctl00$ContentPlaceHolder_Outer$LoginView1$imb_InsertHyperlink').click();
}
Here is the javascript used to assemble the hyperlink markup and paste it into the editor:
function
InsertHyperlink()
{
var editor1 = document.getElementById('CE_ctl00_ContentPlaceHolder_Outer_LoginView1_Editor1_ID');
editor1.FocusDocument();
var DisplayText = document.getElementById('ctl00$ContentPlaceHolder_Outer$LoginView1$txtInsertHyperlinkDisplayText').value;
var DisplayURL = document.getElementById('ctl00$ContentPlaceHolder_Outer$LoginView1$txtInsertHyperlinkURL').value;
var HyperLinkMarkUp = '<a href=\"' + DisplayURL + '\" target="_blank" >' + DisplayText + '</a>';
editor1.ExecCommand(
'PasteHTML',false,HyperLinkMarkUp);
var editortoolbar = document.getElementById('CE_ctl00_ContentPlaceHolder_Outer_LoginView1_Editor1_ID_CodeViewToolBar');
}
Here is a portion of the markup in my page...it contains the editor and the buttons, extenders, panels, etc. needed to represent the modal popup and the buttons in it (note that the "btnInsertHyperlink" button in panel control invokes the javascript function "InsertHyperlink" as shown above...also note that all the markup below is nested within other DIV blocks for positioning):
<asp:LoginView
ID="LoginView1"
runat="server">
<LoggedInTemplate>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<div
style="
overflow: hidden;
width: 780px;
height: 500px;
text-align: left;">
<CE:Editor id="Editor1" runat="server" ConfigurationPath="~/CuteSoft_Client/CuteEditor/Configuration/My_Posts_Compose.config" TemplateItemList="[Print,netspell,separator,Cut,Copy,Paste,hyperlink,Delete,Undo,Redo,separator,Bold,Italic,Underline,JustifyLeft,JustifyCenter,separator,ImageGalleryByBrowsing][fontname,fontsize,zoom]" EditorBodyStyle="font-family: Arial; font-size: 10pt; " AllowPasteHtml="false" Width="780px" Height="500px" MaxTextLength="15000" >
<
FrameStyle BackColor="White" BorderColor="#DDDDDD" BorderStyle="Solid" BorderWidth="1px" CssClass="CuteEditorFrame" Height="100%" Width="100%" />
</
CE:Editor>
</div>
<asp:ImageButton
ID="imb_InsertHyperlink"
Visible="true"
ImageUrl="~/images/1x1_Transparent.gif"
runat="server" />
<ajaxToolkit:ModalPopupExtender
ID="mpe_InsertHyperlink"
runat="server"
PopupControlID="pnlModalPopup_InsertHyperlink"
CancelControlID="btnCancel_InsertHyperlink"
BackgroundCssClass="modalBackground"
TargetControlID="imb_InsertHyperlink"
DropShadow="false" />
<asp:Panel
ID="pnlModalPopup_InsertHyperlink"
runat="server"
Style="
z-index: 1000;
display: none"
Width="345px">
<div
style="
display: inline;
float: left;
background-image: url(Images/ModalPopupTemplate_h189_Lft.png);
background-repeat: no-repeat;
width: 20px;
height: 189px;
text-align: center;
overflow: hidden; "></
div>
<div
style="
display: inline;
float: left;
background-image: url(Images/ModalPopupTemplate_h189_x.png);
background-repeat: repeat-x;
width: 260px;
height: 154px;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
text-align: left;
overflow: hidden; ">
<div style="width: 260px;">
<asp:Label
ID="lbl_InsertHyperlink"
runat="server"
style="
text-align: left;
text-shadow: 0px 1px 1px #000;
font-weight: bold;
font-size: 16px;
color: #ffffff;
font-family: Arial;"
Text="Insert Hyperlink" />
</div>
<div style="width: 260px; padding-top: 0px; ">
<asp:HyperLink
ID="Label1"
runat="server"
style="
text-align: left;
text-shadow: 0px 1px 1px #000;
font-weight: normal;
font-size: 12px;
color: #ffffff;
font-family: Arial;"
Text="Display Text: "></asp:HyperLink>
</div>
<div style="width: 260px; padding-top: 0px; ">
<asp:TextBox
ID="txtInsertHyperlinkDisplayText"
runat="server"
cssclass="TextBox_Standard"
style="display: inline; float: left; width: 255px;"></asp:TextBox>
</div>
<div style="width: 260px; padding-top: 5px; ">
<asp:HyperLink
ID="Label2"
runat="server"
style="
text-align: left;
text-shadow: 0px 1px 1px #000;
font-weight: normal;
font-size: 12px;
color: #ffffff;
font-family: Arial;"
Text="URL :" ></asp:HyperLink
</div>
<div style="width: 260px; padding-top: 0px; ">
<asp:TextBox
ID="txtInsertHyperlinkURL"
runat="server"
cssclass="TextBox_Standard"
Text="http://"
style="display: inline; float: left; width: 255px;" />
</div>
<div style="text-align: right; margin-top: 10px; padding-left: 11px; overflow: hidden; ">
<asp:Button
ID="btnInsertHyperlink"
Text="Insert"
style="width: 115px; "
runat="server" OnclientClick="InsertHyperlink(this)" />
<asp:Button
ID="btnCancel_InsertHyperlink"
Text="Cancel"
style="width: 115px; margin-left: 5px;"
runat="server" />
</div>
</div>
<div
style="
display: inline;
float: left;
background-image: url(Images/ModalPopupTemplate_h189_Rt.png);
background-repeat: no-repeat;
width: 25px;
height: 189px;
text-align: center;
overflow: hidden; "></
div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</LoggedInTemplate>
</asp:LoginView>