Support forums - Obtaining Selected Image HTML

Support forums » Products » Cute Editor for .NET » Re: Obtaining Selected Image HTML

Obtaining Selected Image HTML

Last post 04-20-2011, 10:22 AM by BinbinB. 6 replies.


	Sort Posts: Previous Next

04-17-2011, 2:00 PM 67201

BinbinB
Joined on 04-17-2011
Posts 7

Obtaining Selected Image HTML

Reply Quote

I have created a custom button to display a dialog box to let people type latex which I convert to an image for insertion into the documnt (see code below). The code works fine when entering html for the image. What I want is when a user has selected an image to retrieve the html for the image and display it. I cannot get this to work.

<%@ page language="C#" inherits="CuteEditor.Dialogs.FileBrowserPage" %>
<%@ register tagprefix="CE" assembly="CuteEditor" namespace="CuteEditor" %>
<!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>
<title>Insert Latex Equation</title>
<script type="text/javascript">

function getSelectedHTML() {
var rng = null, html = "";

var editWin = Window_GetDialogArguments(window);
var editdoc = editWin.GetDocument();

            if (document.selection && document.selection.createRange) {
                rng = editdoc.selection.createRange();
                html = rng.htmlText || "";
            } else if (window.getSelection) {
                rng = editwin.getSelection();
                if (rng.rangeCount > 0 && window.XMLSerializer) {
                    rng = rng.getRangeAt(0);
                    html = new XMLSerializer().serializeToString(rng.cloneContents());
                }
            }
            return html;
        }

    </script>
</head>
<body>
    <form runat="server" id="Form1">
    <textarea id="latex" cols="42" rows="10"></textarea><br />
    <br />
    <button onclick="button_click()" id="Button1">Insert Equation</button>
    <button onclick="window.top.close();" id="Button2">Cancel</button>
    </form>
    <script type="text/javascript">

document.getElementById('latex').innerHTML = getSelectedHTML();

        function button_click() {
            var editor = Window_GetDialogArguments(window);
            var ta = document.getElementById("latex");
            editor.PasteHTML(ta.value);
            window.top.close();
        }

    </script>
</body>
</html>

A typical image url is:

The user will only work with the text between the $ signs and I will build up the full html before inserting (logic omitted from above) and this displays equations on the site. If the user has made a msitake I would like him to be able to click on the image to edit it, hence my need to get the html for the image. I will manipulate the html to show only the bit between the $ signs in the dialog (logic omitted from above).

Any help in somehow extracting the html for a selected image would be really appreciated.

04-17-2011, 9:22 PM 67203 in reply to 67201

Kenneth
Joined on 02-13-2008
Posts 3,886

Re: Obtaining Selected Image HTML

Reply Quote

Hi BinbinB,

Please try the example below

<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>
<!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>
</head>
<body>
    <form id="form1" runat="server">
        <CE:Editor ID="editor1" runat="server">
        </CE:Editor>
        <input type="button" value="Get image html code" onclick="getSrc()" />
    </form>
</body>
</html>

<script>
function getSrc() {
    alert(getSelectedHTML());
}

function getSelectedHTML() {
    var editor1 = document.getElementById("<%= editor1.ClientID %>");
    var editwin = editor1.GetWindow();
    var editdoc = editor1.GetDocument();
    var rng = null,
        html = "";
    if (document.selection && document.selection.createRange) {
        rng = editdoc.selection.createRange();
        if (editdoc.selection.type == "Control") {
            if (rng.length == 1) {
                var element = rng.item(0);
                if (element.tagName == 'IMG') {
                    html = element.src;
                    //get html code of img tag
                    //html=element.outerHTML;

                }
            }
        } else {
            html = rng.htmlText || "";
        }
    } else if (window.getSelection) {
        rng = editwin.getSelection();

        if (rng.rangeCount > 0 && window.XMLSerializer) {
            rng = rng.getRangeAt(0);
            for (var i = 0; i < rng.startContainer.childNodes.length; i++) {
                if (rng.startContainer.childNodes[i].tagName == "IMG") {

                    html = rng.startContainer.childNodes[i].src;
                }

            }

        }
    }
    return html;
}
</script>

Regards,

Ken

04-18-2011, 9:56 AM 67219 in reply to 67203

BinbinB
Joined on 04-17-2011
Posts 7

Re: Obtaining Selected Image HTML

Reply Quote

Kenneth,

Thanks for your help. I can now read the image src, display/edit in the dialogue and recreate the new image src. Still have one final problem and that is getting it back in to the editor. I have tried a lot of things, including modifying the code for getting the src in the first instance (see below). If you cold help me out with this last thing it would be really great.

function button_click() {

            var editor1 = Window_GetDialogArguments(window); ;
            var editwin = editor1.GetWindow();
            var editdoc = editor1.GetDocument();
            var rng = null;

            var ta = document.getElementById("latex").value;
            var src = "/Eq?$\\large " + escape(ta) + "$" + "";
            var html = "<img class='wikiEquation' src='/Eq?$\\large " + escape(ta) + "$'/>" + "";

                if (document.selection && document.selection.createRange) {
                rng = editdoc.selection.createRange();
                if (editdoc.selection.type == "Control") {
                    if (rng.length == 1) {
                        var element = rng.item(0);
                        if (element.tagName == 'IMG') {
                            element.src=src;
                            //get html code of img tag
                            //html=element.outerHTML;
                        }
                    }
                } else {
                    rng.htmlText = html;
                }
            } else if (window.getSelection) {
                rng = editwin.getSelection();

                if (rng.rangeCount > 0 && window.XMLSerializer) {
                    rng = rng.getRangeAt(0);
                    for (var i = 0; i < rng.startContainer.childNodes.length; i++) {
                        if (rng.startContainer.childNodes[i].tagName == "IMG") {

rng.startContainer.childNodes[i].src=src;
}

                    }
                }
            }

window.top.close();
}

04-18-2011, 8:23 PM 67226 in reply to 67219

Kenneth
Joined on 02-13-2008
Posts 3,886

Re: Obtaining Selected Image HTML

Reply Quote

Hi BinbinB,

Please check example "create_a_custom_dialog.aspx". It shows you how to create a custom dialog and insert the content into CuteEditor.

You should find the code in "Download package\Framework 2.0\HowTo\AddDialogs\cs\create_a_custom_dialog.aspx"

Online demo http://cutesoft.net/example/howto/AddDialogs/cs/create_a_custom_dialog.aspx

Regards,

ken

04-19-2011, 9:00 AM 67244 in reply to 67226

BinbinB
Joined on 04-17-2011
Posts 7

Re: Obtaining Selected Image HTML

Reply Quote

I have already looked at that. The button is in the editor and is working fine. Click on the button, dialogue comes up and if the user had selected an image I can extract the source (and from that my equation Latex code). All this works. If the person changes the Latex code in the dialogue, I want to rebuild the image src and replace the src on the selected image in the editor. This is what I cannot get working.

In addition to the above code (one post up) I have also tried the editor PasteHTML function. This works fine if the user has not selected an image and I am inserting html for a new image. This does not work if the user has selected an image and I want to replace the selected image html with a new image html.

To let you know why I am trying to do this, a typical src would be '/Eq?$A^3 sqrt(2)=25$'. I am only showing the bit between the '$' in the dialogue box and the user will edit this to change the equation. I then need to replace the original src tag. Everything is working apart for the very last bit of getting the changed src (or full image html) back into the editor. The above would generate:

04-19-2011, 10:10 PM 67253 in reply to 67244

Kenneth
Joined on 02-13-2008
Posts 3,886

Re: Obtaining Selected Image HTML

Reply Quote

Hi BinbinB,

Try the example below

1. Create a page name "example.aspx". below is the page code

<%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>

<%@ Page Language="c#" %>

<html>
<head>
    <title>ASP.NET WYSIWYG Editor - How to create a custom button which displays a dialog?</title>

    <script language="JavaScript" type="text/javascript">
           function ShowMyDialog(button)
           {
               var editor=CuteEditor_GetEditor(button);
               var newwin=editor.ShowDialog(null,"My_Custom_Text.html?_rand="+new Date().getTime()
                   ,editor,"dialogWidth:400px;dialogHeight:240px");
           }
    </script>

</head>
<body>
    <form runat="server" id="Form1">
        <CE:Editor ID="Editor1" AutoConfigure="Simple" runat="server" />
    </form>
</body>
</html>

<script runat="server">
    private void Page_Load(object sender, System.EventArgs e)
    {
        int pos = Editor1.ToolControls.IndexOf("CleanCode") + 1;
        WebControl ctrl = Editor1.CreateCommandButton("MyButton", "text.gif", "Insert My Custom Text");
        ctrl.Attributes["onclick"] = "ShowMyDialog(this)";
        Editor1.InsertToolControl(pos, "MyButton", ctrl);
    }
</script>

2. Create a page name "My_Custom_Text.html". below is the page code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>Insert Text</title>
</head>
<body bgcolor="#d4d0c8">
    <div align="center" style="padding: 8px">
        <textarea rows="6" cols="40" id="ta" name="ta">Type content here</textarea>
        <br>
        <button onclick="changeUrl()" id="Button1">
            Insert It</button>
        <button onclick="window.top.close();" id="Button2">
            Close</button>
    </div>
</body>

<script>
var img;
window.onload = function () {
    var ta = document.getElementById("ta");
    img = getImg();
    ta.value = img.src;
}

function changeUrl() {
    var ta = document.getElementById("ta");
    img.src = ta.value;
}

function getImg() {
    var editor1 = Window_GetDialogArguments(window);
    var editwin = editor1.GetWindow();
    var editdoc = editor1.GetDocument();
    var rng = null;
    if (document.selection && document.selection.createRange) {
        rng = editdoc.selection.createRange();
        if (editdoc.selection.type == "Control") {
            if (rng.length == 1) {
                var element = rng.item(0);
                if (element.tagName == 'IMG') {
                    return element;
                }
            }
        }
    } else if (window.getSelection) {
        rng = editwin.getSelection();
        if (rng.rangeCount > 0 && window.XMLSerializer) {
            rng = rng.getRangeAt(0);
            for (var i = 0; i < rng.startContainer.childNodes.length; i++) {
                if (rng.startContainer.childNodes[i].tagName == "IMG") {

                    return rng.startContainer.childNodes[i];
                }

            }

        }
    }
}

function Window_GetDialogArguments(win) {
    var top = win.top;
    try {
        var opener = top.opener;
        if (opener && opener.document._dialog_arguments) return opener.document._dialog_arguments;
    } catch (x) {}
    if (top.document._dialog_arguments) return top.document._dialog_arguments;
    if (top.dialogArguments) return top.dialogArguments;
    return top.document._dialog_arguments;
}
</script>

</html>

3. Put these page to the root of your site and test it. The second button is the custom button.

Regards,

Ken

04-20-2011, 10:22 AM 67264 in reply to 67253

BinbinB
Joined on 04-17-2011
Posts 7

Re: Obtaining Selected Image HTML

Reply Quote

Thanks to your help Kenneth I now have finally got it working.

Allocating the img variable before anyone uses the dialogue was the key.

I think the support on this issue is the best I have had of any software. Really impressed.