What's New?

[CLOSED] HTML Editor - insert image with relative path

  1. #1
    Apr 06, 2010, 8:50 AM

    [CLOSED] HTML Editor - insert image with relative path


    Hello

    I have a webpage with a simple html editor contained within it.

    <ext:Panel ID="pnlHelpContent" runat="server" StyleSpec="padding-left: 6px;" Title="Help Content" Icon="Help" Layout="fit" frame="true"> 
    <Items>
        <ext:Panel ID="pnlContent" runat="server" StyleSpec="Padding: 6px" BodyStyle="padding: 6px; background-color: #ffffff; border: 1px solid #99bbe8;" Layout="fit" frame="false" AutoScroll="true"> 
            <TopBar>
                <ext:Toolbar ID="Toolbar1" runat="server">
                    <Items>
                        <ext:Button ID="btnEdit" runat="server" Text="Edit" Icon="Pencil">
                            <Listeners>
                                <Click Fn="btnEditClick" />
                            </Listeners>
                        </ext:Button>





                        <ext:Button ID="btnSave" runat="server" Text="Save" Icon="Disk" Disabled="true">
                            <Listeners>
                                <Click Fn="btnSave_Click" />
                            </Listeners>
                        </ext:Button> 





                        <ext:Button ID="btnCancel" runat="server" Text="Cancel" Icon="Cancel" Disabled="true">
                            <Listeners>
                                <Click Fn="btnCancelClick" />
                            </Listeners>
                        </ext:Button>





                        <ext:ToolbarFill ID="ToolbarFill1" runat="server"></ext:ToolbarFill> 
                        <ext:Label ID="lblModified" runat="server" Hidden="true"></ext:Label>
                        <ext:ToolbarSpacer Width="4" runat="server" ID="ctl67"></ext:ToolbarSpacer> 
                    </Items>
                </ext:Toolbar>
            </TopBar> 
        </ext:Panel>





        <ext:Editor ID="pnlEditor" runat="server" Shadow="None" AutoSize="Fit" ignoreNoChange="true">
            <Field>
                <ext:HtmlEditor ID="htmlEditor" runat="server" >
                    <Listeners>
                        <Render Handler="htmlEditorRender(this)" />
                    </Listeners>
                </ext:HtmlEditor>
            </Field>
        </ext:Editor>
    </Items>
</ext:Panel>
    I insert images into the editor using a button that i have added to the editors toolbar, 
     

function htmlEditorRender(htmlEditor) {

    htmlEditor.tb.addSeparator();

    htmlEditor.tb.addButton({ handler: insertHandler, iconCls: 'icon-image', tooltip: 'Insert Image<br>Upload a new image or insert an existing image' });

}
    </PRE>

    when i insert the image i only want the relative path of the image to be displayed, however, when i click on the view html option on the editor the full image path is being displayed.

    

function insertHandler() {

    htmlEditor.execCmd('InsertImage', 'ImageHandler.ashx?ImageID=' + opImage[0].data.ImageID + '&amp;fullsize=true');

}
    </PRE>Could you please advise me how to prevent the editor from containing the full image path and just displaying the relative path?

    Thank You



    </PRE>





  2. #2
    Apr 06, 2010, 9:58 AM

    RE: [CLOSED] HTML Editor - insert image with relative path

    Hi,

    Internet Explorer converts all relative links to absolute on the client. This behavior is due to the DOM engine of the Internet Explorer which ?fills? the paths (href or src) for the objects in an editing area.

    You have to manually strip absolute part from all links on the server side. Please see the following sample

    <%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    
    <script runat="server">
        protected void SubmitHtml(object sender, DirectEventArgs e)
        {
            string html = htmlEditor.Text;
            html = html.Replace(this.Page.Request.Url.AbsoluteUri.Replace(this.Page.Request.Url.AbsolutePath, ""), "");
            Ext.Net.X.Msg.Alert("HTML", this.Server.HtmlEncode(html)).Show();
        }
    </script>

    <script type="text/javascript">
        function htmlEditorRender(htmlEditor) {
            htmlEditor.tb.addSeparator();
            htmlEditor.tb.addButton({ handler: insertHandler, iconCls : "icon-image", text: "Insert image", tooltip: 'Insert Image<br>Upload a new image or insert an existing image' });
        }
        
        function insertHandler() {
            htmlEditor.insertAtCursor("<img src=\"myimage.gif\">");
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager runat="server" />
        
        <% ResourceManager.GetInstance(this.Page).RegisterIcon(Icon.Image); %>
        
        <ext:HtmlEditor ID="htmlEditor" runat="server" Width="1000" >
            <Listeners>
                <Render Handler="htmlEditorRender(this);" />
            </Listeners>
        </ext:HtmlEditor>    
        
        <ext:Button runat="server" Text="Submit">
            <DirectEvents>
                <Click OnEvent="SubmitHtml" />
            </DirectEvents>
        </ext:Button>
    </form>
</body>
</html>
  3. #3
    Apr 07, 2010, 3:48 AM

    RE: [CLOSED] HTML Editor - insert image with relative path

    That solved the issue

    Thank you

Similar Threads

  1. [CLOSED] HTML EDITOR - Insert Value in last location of cursor
    By nirajrdave in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 23, 2012, 4:58 AM
  2. [CLOSED] How to load a page from a Content or Panel using relative path?
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 02, 2010, 10:32 AM
  3. [CLOSED] Error loading pages using relative path
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 01, 2010, 9:53 AM
  4. [CLOSED] How to load an aspx page using relative path for the url?
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 01, 2010, 8:27 AM
  5. [CLOSED] HowTo AutoLoad a relative path IFRAME into each tab
    By randy85253 in forum 1.x Help
    Replies: 6
    Last Post: Oct 02, 2008, 12:38 PM

Posting Permissions