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

Re: Obtaining Selected Image HTML

  •  04-19-2011, 10:10 PM

    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
View Complete Thread