[CLOSED] Add JavaScript to Links in HtmlEditor

  1. #1

    [CLOSED] Add JavaScript to Links in HtmlEditor

    Hello again,

    I use the HtmlEditor including EnableLinks="true".

    The HtmlEditor is placed inside a TabPanel as well as the HtmlText which is edited by the HtmlPanel.

    My problem is... when I click on a generated link, then the url is loaded in the same panel,
    but I want to load the Url in a new Panel.

    How can I do that or how can I add onclick-Javascript-code to generated link?



    Regrads,

    Martin
  2. #2

    RE: [CLOSED] Add JavaScript to Links in HtmlEditor

    Can you start us off with a simplified .aspx sample demonstrating what you have configured so far?

    Geoffrey McGill
    Founder
  3. #3

    RE: [CLOSED] Add JavaScript to Links in HtmlEditor

    Ok here comes a simplified version:

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    <!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 id="Head1" runat="server">
        <title></title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
    
        <script type="text/javascript">
            function addTab(tabPanel, id, url) {
                var tab = tabPanel.getComponent(id);
                if (!tab) {
                    tab = tabPanel.add({
                        id: id,
                        title: url,
                        closable: true,
                        autoLoad: {
                            showMask: true,
                            url: url,
                            mode: 'iframe',
                            maskMsg: 'Loading ' + url + '...'
                        }
                    });
    
                    tab.on('activate', function() {
                        var item = MenuPanel1.menu.items.get(id + "_item");
                        if (item) {
                            MenuPanel1.setSelection(item);
                        }
    
                    }, this);
                }
                tabPanel.setActiveTab(tab);
            }
        </script>
    
        <script runat="server">
            protected void AddAnnotation(object sender, AjaxEventArgs e)
            {
                ContentPanel.Html = HtmlEditor.Text;
                HtmlEditor.Text = "";
                HtmlEditorPanel.Hide();
            }
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" />
        <ext:TabPanel ID="TabPanel1" runat="server">
            <Tabs>
                <ext:Tab>
                    <Body>
                        <ext:Label ID="ContentPanel" runat="server" Html="TestText" />
                        <ext:LinkButton runat="server" ID="EditButton" Icon="NoteEdit" Text="Edit">
                            <Listeners>
                                <Click Handler="#{HtmlEditorPanel}.show(); #{HtmlEditor}.setValue(#{ContentPanel}.html);" />
                            </Listeners>
                        </ext:LinkButton>
                        <ext:Panel ID="HtmlEditorPanel" runat="server" Hidden="true" Width="800">
                            <Body>
                                <ext:HtmlEditor ID="HtmlEditor" runat="server" Height="400" Width="800" />
                            </Body>
                            <BottomBar>
                                <ext:Toolbar ID="EditorBottomBar" runat="server">
                                    <Items>
                                        <ext:ToolbarButton ID="buttonSubmit" runat="server" Icon="NoteAdd" StandOut="true"
                                            Text="Edit">
                                            <AjaxEvents>
                                                <Click Type="Submit" OnEvent="AddAnnotation">
                                                    <EventMask ShowMask="true" />
                                                </Click>
                                            </AjaxEvents>
                                        </ext:ToolbarButton>
                                    </Items>
                                </ext:Toolbar>
                            </BottomBar>
                        </ext:Panel>
                    </Body>
                </ext:Tab>
            </Tabs>
        </ext:TabPanel>
        </form>
    </body>
    </html>

    When you Edit the content and then Add a Link, save the content and click on that link after it,
    then the link is opened in the same window. I want to open it in a new tab, which means that I want to add the "addTab" javascript method to a link which is generated by the HtmlEditor.



    Regards,

    Martin
  4. #4

    RE: [CLOSED] Add JavaScript to Links in HtmlEditor

    Hi,

    The single way is toggle to source edit mode in html editor and manually set required changes for anchor.

    Or parse submitted html editor value in AddAnnotation (with RegExp for example), find anchors, change anchors as required and set changed text to the ContentPanel

Similar Threads

  1. Replies: 0
    Last Post: Apr 06, 2012, 11:11 AM
  2. [CLOSED] HtmlEditor EnableLinks - links don't function
    By SFritsche in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 03, 2010, 5:03 PM
  3. Links Inside GridPanel
    By marcmvc in forum 1.x Help
    Replies: 1
    Last Post: May 17, 2010, 1:43 PM
  4. Replies: 2
    Last Post: Jul 01, 2009, 4:49 PM
  5. [CLOSED] Event masking in href links....
    By speedstepmem2 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 05, 2009, 5:21 AM

Posting Permissions