Support forums - Customised image selector unable to work in Chrome v13.0.782.220 m

Support forums » Products » Cute Editor for .NET » Re: Customised image selector unable to work in Chrome v13.0.782.220 m

Customised image selector unable to work in Chrome v13.0.782.220 m

Last post 09-15-2011, 8:23 PM by huatz. 2 replies.


	Sort Posts: Previous Next

09-14-2011, 6:36 AM 70049

huatz
Joined on 09-15-2011
Posts 5

Customised image selector unable to work in Chrome v13.0.782.220 m

Reply Quote

Hi,

I have followed some postings I saw in the forum on how to do up a image selector using the CuteEditor. I have followed them and implemented it as a control. The codes are as below. The code works fine in ie9 and Firefox but is unable to work in Chrome. I did some checking and found that the following statement returns -1 --> editdoc.images. No matter how I tried, I could not get it to work. Any help is greatly appreciated.

Cheers,

huatz

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
        <div style="position:absolute;z-index:-100">
   <CE:Editor id="HtmlEditor" URLType="SiteRelative" UseRelativeLinks="true" runat="server" Width="1" Height="1" AutoConfigure="None" ShowHtmlMode="False" ShowPreviewMode="False" EnableContextMenu="false" ShowGroupMenuImage="False" ShowBottomBar="False" BackColor="White" BorderColor="White"></CE:Editor><div style="display:none"><asp:TextBox ID="uiSource" runat="server" Text="foo" /></div>
  </div>
  <asp:TextBox id="imageFld" runat="server" />
  <INPUT type="button" value="Select Image" class="<%=styleFile %>" onclick="<%=HtmlEditor.ClientID%>callInsertImage()" id="Insert Image" NAME="Insert Image">

</td>
</tr>
</table>
<script language="javascript">
    function <%=HtmlEditor.ClientID%>callInsertImage()
    {
     var editor1 = document.getElementById('<%=HtmlEditor.ClientID%>');
        editor1.FocusDocument();
        var editdoc = editor1.GetDocument();
        editor1.ExecCommand('new');
        editor1.ExecCommand('InsertImage');
        <%=HtmlEditor.ClientID%>InputImageURL();
    }
    function <%=HtmlEditor.ClientID%>InputImageURL()
    {
        var editor1 = document.getElementById('<%=HtmlEditor.ClientID%>');
        var editdoc = editor1.GetDocument();
        var imgs = editdoc.images;
        if(imgs.length>0)
        {
            var path1=imgs[imgs.length-1].src.split('cmsresource/');
            editor1.ExecCommand('new');
            document.getElementById('<%=imageFld.ClientID%>').value = path1[1];
            document.getElementById('<%=imageFld.ClientID%>').focus();
            document.getElementById('<%=uiSource.ClientID%>').value = path1[1];

            //editor1.getHTML();
            //editor1.ExecCommand('new');
        }
        else
        {
            setTimeout(<%=HtmlEditor.ClientID%>InputImageURL,5000);
        }
    }
</script>

Filed under: Image Selector

09-14-2011, 7:37 AM 70050 in reply to 70049

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

Re: Customised image selector unable to work in Chrome v13.0.782.220 m

Reply Quote

Hi huatz,

Please try the example below.

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

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

<html>
<head>
    <title>ASP.NET WYSIWYG Editor - Use CuteEditor as an image selector</title>
    <style>
        body {
        text-align: center;
        margin-top:20px
        }
        .demo {
        text-align: left;
        width: 700px;
        border:solid 5px #CBCAC6;
        background-color:#fbfbfb;
        padding: 30px 30px 50px 30px;
        font-family:Segoe UI, Arial,Verdana,Helvetica,sans-serif;
        font-size: 100%;
        margin: 0 auto;
        }
    </style>
</head>
<body>
    <form id="Form1" runat="server">

            <asp:TextBox ID="imageFld" Width="300" runat="server" />
            <input type="button" value="Change Image" onclick="callInsertImage()" id="Change"
                runat="server" name="Change">
            <CE:Editor id="Editor1" runat="server" Width="1" Height="1" AutoConfigure="None"
                ShowHtmlMode="False" ShowPreviewMode="False" EnableContextMenu="false" ShowGroupMenuImage="False"
                ShowBottomBar="False" BackColor="White" BorderColor="White">
            </CE:Editor>

    </form>

    <script language="javascript">
    function callInsertImage()
    {
           var editor1 = document.getElementById('<%=Editor1.ClientID%>');

            var editdoc = editor1.GetDocument();
            editor1.SetHTML("");
            editor1.ExecCommand('ImageGalleryByBrowsing');
            InputURL();
    }

    function InputURL()
    {
       var editor1 = document.getElementById('<%=Editor1.ClientID%>');
        var editdoc = editor1.GetDocument();
        var imgs = editdoc.images;
        if(imgs.length>0)
        {   document.getElementById("imageFld").value = imgs[imgs.length-1].src;
            editor1.ExecCommand('new');
            document.getElementById("imageFld").focus();
        }
        else
        {
           setTimeout(InputURL,500);
        }
    }
    </script>

</body>
</html>

Regards,

Ken

09-15-2011, 8:23 PM 70071 in reply to 70050

huatz
Joined on 09-15-2011
Posts 5

Re: Customised image selector unable to work in Chrome v13.0.782.220 m

Reply Quote

Hi Kenneth,

Thanks for your help. I've changed my image selector to using the gallery as your code suggested and it worked. I did make some changes as I had to include many instances of the images selector in a single page. Below is my final codes for all to reference.

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
        <div style="position:absolute;z-index:-100">
   <CE:Editor id="HtmlEditor" URLType="SiteRelative" UseRelativeLinks="true" runat="server" Width="1" Height="1" AutoConfigure="None" ShowHtmlMode="False" ShowPreviewMode="False" EnableContextMenu="false" ShowGroupMenuImage="False" ShowBottomBar="False" BackColor="White" BorderColor="White"></CE:Editor><div style="display:none"><asp:TextBox ID="uiSource" runat="server" Text="foo" /></div>
  </div>
  <asp:TextBox id="imageFld" runat="server" />
  <INPUT type="button" value="Select Image" class="<%=styleFile %>" onclick="<%=HtmlEditor.ClientID%>callInsertImage()" id="Insert Image" NAME="Insert Image">

</td>
</tr>
</table>
<script language="javascript">
    function <%=HtmlEditor.ClientID%>callInsertImage()
    {
     var editor1 = document.getElementById('<%=HtmlEditor.ClientID%>');
        editor1.FocusDocument();
        var editdoc = editor1.GetDocument();
        editor1.SetHTML("");
        editor1.ExecCommand('ImageGalleryByBrowsing');
        <%=HtmlEditor.ClientID%>InputImageURL();
    }
    function <%=HtmlEditor.ClientID%>InputImageURL()
    {
        var editor1 = document.getElementById('<%=HtmlEditor.ClientID%>');
        editor1.FocusDocument();
        var editdoc = editor1.GetDocument();
        var imgs = editdoc.images;
        if(imgs.length>0)
        {
            var path1=imgs[imgs.length-1].src.split('cmsresource/');
            editor1.ExecCommand('new');
            document.getElementById('<%=imageFld.ClientID%>').value = path1[1];
            document.getElementById('<%=uiSource.ClientID%>').value = path1[1];
            document.getElementById('<%=imageFld.ClientID%>').focus();
        }
        else
        {
            setTimeout(<%=HtmlEditor.ClientID%>InputImageURL,500);
        }
    }
</script>