Hi,

 

I'm creating a CMS for a website and I need to give users the ability to enter info related to articles that they wish to post to the site. Among the fields are Date, Title, Body and Thumbnail Image. The Date and Title I take care of with regular text input boxes, the Body is sorted with Cute Editor, however, the Thumbnail Image has me stuck...I would like to use the Cute Editor Insert Image window to allow users to either select an existing image, or to upload a new one from their PC.

 

The thing is, I don't want them to necessarily see the Cute Editor interface just for this...it would be preferred if the Editor were "hidden" and the Insert Image were invoked by clicking on a button. Once they have selected/uploaded their image, the src for that image would then be passed to a hidden input field for when the user hits the Submit button.

 

Has anyone been able to do anything similar? I would be very interested in any info on how to go about this.

 

Thanks in advance.

optik,

I think the user (iTim)  find a solution to call the 'Downloadable Files' dialog window from outside the editor.

 

This is jjano's input

How to: Use the image selector from CuteEditor outside of the editor itself

 

 

Hope it helps.

 

 

Adam,

The link you provided was to iTim's profile, and even after searching for all his posts, I still haven't found the thread regarding calling the downloadable files dialog window from outside the editor. Could you provide me with the direct link to the thread please.

 

Thanks.

optik,

 

iTim didn't get a chance post his solution in the forums. Please contact iTim by sending him email through the forums and PM.

 

 

Ah, now I understand. Sorry about that.

 

Thanks!

No reply from iTim...

Can you tell me what js function I need to call in order to invoke the Insert Image window please Adam...

 

I'm trying to do something like the following:

 

[myButton] --> onclick = "callImageInsert()"

 

function callImageInsert()

{
var editor1 = document.getElementById('<%=Editor1.ClientID%>');

var editdoc=editor1.GetDocument();

editdoc.insertImage();
}

 

 

Understand?

I figured it out!!!

 

I ended up finding little bits and pieces here and there on the forums...specifically...

and

 

Piecing them together, I was able to get the desired effect...if anyone should ever need help with something like this, you can try to get a hold of me at slyczar at gmail.com

 

Thanks for all your help nonetheless.

 

Thanks to this breakthrough, I've recommended that we go ahead and purchase our Developer Team License!

Guys,

 

We put everything together and create an online demo:

 

How to use CuteEditor as an image selector?( Demo1 |  Demo2 ) This example demonstrates how to use CuteEditor as an image selector

How can i access the source-code of the above mentioned demo?

 

Regards

Fredrik

The demo is great, and I have successfully adapted it for a site that needed to use the Image and File dialogs at times without showing the editor (Javascript code listed below). Using CuteEditor .NET 6 (.NET 1.1). It all works perfectly with IE7.

 

However, that's as good as it gets. With Firefox 2.0.0.3 it displays the insert image dialog but when you select an image, it throws various errors (see below) and doesn't return to the calling script.

 

With Opera 9.2 it doesn't even show the dialog, nor on the Mac. See below for Opera error.

 

I suspect the problems have to do with the way the editor is rendered in each browser, but don't know how to resolve this. Can anyone help, please?

 

Paul

 

 

Error: obj has no properties
Source File: http://etrader.lab.dotcomsoftwaresolutions.co.uk/CuteSoft_Client/CuteEditor/Dialogs/Load.ashx?type=dialogscript&file=Dialog_InsertGallery.js
Line: 1

 

Error: cell.all has no properties
Source File: http://etrader.lab.dotcomsoftwaresolutions.co.uk/BackOffice/UpdateShop.aspx
Line: 38

 

Error: cell.all has no properties
Source File: http://etrader.lab.dotcomsoftwaresolutions.co.uk/BackOffice/UpdateShop.aspx
Line: 38

 

Error: editdoc has no properties
Source File: http://etrader.lab.dotcomsoftwaresolutions.co.uk/CuteSoft_Client/CuteEditor/Dialogs/Load.ashx?type=dialogscript&file=Dialog_InsertGallery.js
Line: 1

 

JavaScript - http://etrader.lab.dotcomsoftwaresolutions.co.uk/BackOffice/UpdateShop.aspx?__redir=1

Event thread: click
Error:
name: TypeError
message: Statement on line 5: Type mismatch (usually a non-object value used where an object is required)
Backtrace:
  Line 5 of linked script http://etrader.lab.dotcomsoftwaresolutions.co.uk/Script/Resource.js
    editor.FocusDocument();
  Line 1 of  script
    callInsertImage("CE_editLogo_ID", "hidLogo");
  At unknown location
    [statement source code not available]

 

   var editdoc = editor.GetDocument(); 
   editor.ExecCommand('new');
   editor.ExecCommand('ImageGalleryByBrowsing');
   InputURL(editorClientId, targetControl);

OK, I have solved some of the problems here. In my Javascript, I had not allowed for the fact that Mozilla and Opera open the Insert Image dialog asynchronously, so the code has to loop waiting for the user to select an image. In the sample code that ships with CE 6.0, the setTimeout command is used for this purpose (see below).

 

However, there's still a problem with this. If the user clicks the cancel button on the dialog, the javascript keeps running in a loop until the browser is closed. Apart from being inefficient, this leaves no way of taking an alternative action on cancel, which I need to do. Is there no other way of determining that the dialog has been closed other than testing to see if an image has been selected?

 

Any help appreciated.

 

Paul

 

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

Paul,

 

The following example has been tested in all browsers. Please download the version 6.0 and find the source code of this example. Please make sure this example works for you first. Then modify it to meet your requirements.

 

How to use CuteEditor as an image selector?( Demo1 |  Demo2 ) This example demonstrates how to use CuteEditor as an image selector