Support forums - Inserting an image at current cursor position.

Support forums » Products » Cute Editor for .NET » Re: Inserting an image at current cursor position.

Inserting an image at current cursor position.

Last post 03-17-2008, 2:46 PM by sfcalvert. 10 replies.


	Sort Posts: Previous Next

09-09-2007, 5:15 PM 33394

Domainscanners
Joined on 04-27-2007
Posts 45

Inserting an image at current cursor position.

Reply Quote

Hi Adam,

How do I retrieve the current cursor position of CE (so I can save it) and then set CE's cursor position?

Im aware that .PasteHtml uses the current cursor position but I seem to be losing this position somewhere along the line as my code will only paste at the beginning of the Editor's document.

My page has a ce which I use as an Image selector. Also, I have wrapped CE as a webpart control so users can add as many CE objects to their page as they wish. I then pass in the client side ID of the CE object that I want to paste an image in to. This all works perfectly apart from always inserting the images at the top of the CE document.

I have looked at the demo code "function Window_GetDialogArguments(win)" and don't fully understand how this works or how I can taylor it for my project.

Hope you can help? My client side function as it stands is inserted below...

Paul.

// Public Image Gallery

function callShowPublicImageGallery(strCEID)

{

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

editor1.FocusDocument();

var editdoc = editor1.GetDocument();

editor1.ExecCommand('new');

editor1.ExecCommand('ImageGalleryByBrowsing');

InputURL(strCEID);

}

function InputURL(str_CEID)

{

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

var activeEditor = document.getElementById(str_CEID);

var editdoc = editor1.GetDocument();

var imgs = editdoc.images;

if(imgs.length>0)

{

// Strip everything up to the third "/" -1 character to make development environment friendly. lastIndexOf() works its way backwords through string

var imgurl = imgs[imgs.length-1].src;

var strImageGallery = imgurl.lastIndexOf("/ImageGallery/");

var urllength = imgurl.length;

var newurl = imgurl.substring(strImageGallery, urllength);

activeEditor.PasteHTML("<img src='" + newurl + "' />");

document.getElementById(str_CEID).focus();

}

else

{

setTimeout(InputURL,500);

}

09-11-2007, 9:55 AM 33452 in reply to 33394

Adam
Joined on 09-23-2003
Aurora, ON
Posts 18,678

Re: Inserting an image at current cursor position.

Reply Quote

Paul,

Try the following code:

<Script Language="javascript">
    function callInsertImage()
    {
   var editor1 = document.getElementById('<%=Editor1.ClientID%>');
            editor1.FocusDocument();
            var editdoc = editor1.GetDocument();
            editor1.ExecCommand('new');
            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>

asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
asp wysiwyg html editor: http://cutesoft.net/ASP
asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
Live Support: http://cutesoft.net/live-support/default.aspx

09-19-2007, 12:40 PM 33642 in reply to 33452

Domainscanners
Joined on 04-27-2007
Posts 45

Re: Inserting an image at current cursor position.

Reply Quote

The above overwrites whatever is already in the target document?

I need a way to store, retrieve and set the current cursor position of a CuteEditor control. Then I can focus the CE, set the cursor and paste at that position. Basically im using a static CE as an image selector that pastes into another dynamically rendered CuteEditor document.

An alternative would be able to set the "ImageGalleryPath" via client side javascript but im not sure if this is possible.

I have everything working, my static CE as imageSelector pastes into correct Dynamic CE Editor just at the wrong place!

Please help!

03-11-2008, 12:38 PM 37792 in reply to 33642

mikea
Joined on 01-11-2006
Posts 21

Re: Inserting an image at current cursor position.

Reply Quote

Was the orginal question ever answered?

How do you save and restore the current cursor position in CE in cases where focus can be lost?

I have a similar issue, where my custom popup windows steal focus, then when they party on the CE content the item that was selected in the CE is no longer selected and my cursor position is back to the top. My popups insert content - so its always inserting it at the top of the doc...

Any way to bookmark and restore the cursor/selected item?

03-13-2008, 9:49 PM 37937 in reply to 33394

sfcalvert
Joined on 03-13-2008
Posts 9

Re: Inserting an image at current cursor position.

Reply Quote

I'm having the same exact problem. I'm using custom YUI dialogs to serve as popup windows. Currently when my popup opens, I lose the cursor in the cute editor. Also, when I make a selection by highlighting a word, that selection is lost on popup. This is crucial for me to be able to fix, as my company won't buy this product unless our evaluation goes smoothly. I love cute so far, but this seems like a show stopper.

03-14-2008, 8:34 AM 37964 in reply to 37937

mikea
Joined on 01-11-2006
Posts 21

Re: Inserting an image at current cursor position.

Reply Quote

Adam,

Given that CE's own dialogs would suffer the same fate, is there some javascript in your code we can call to do the same thing you guys are doing?

Thanks for any help - this is becoming critical for us.

Michael

03-14-2008, 8:46 AM 37965 in reply to 37964

Adam
Joined on 09-23-2003
Aurora, ON
Posts 18,678

Re: Inserting an image at current cursor position.

Reply Quote

Michael,

Please check this example:

Add a Cross Browser Modal Dialog Box to Cute Editor

How to create a custom button(client side) which displays a dialog?( C# | VB )

This example demonstrates how easy it can be to add your own client side buttons to the CuteEditor by creating a Cross Browser Modal Dialog Box.

It shows you how to insert the HTML code in the cursor position.

03-14-2008, 9:23 AM 37968 in reply to 37965

mikea
Joined on 01-11-2006
Posts 21

Re: Inserting an image at current cursor position.

Reply Quote

Thanks Adam.

That works fine if I use your modals but I need to use my own, as does sfcalvert who is using the yahoo ui library.

Can you share with us the javascript your editor.showDialog code uses to preserve the focus/selection?

Michael

03-14-2008, 10:21 AM 37971 in reply to 37968

Adam
Joined on 09-23-2003
Aurora, ON
Posts 18,678

Re: Inserting an image at current cursor position.

Reply Quote

Michael,

I suggest you'd better use our method to open the dialog. Otherwise you have to modify the your code to achieve this behaviour. We cannot share the source code with you unless you own the source code license.

03-14-2008, 11:01 AM 37974 in reply to 33394

sfcalvert
Joined on 03-13-2008
Posts 9

Re: Inserting an image at current cursor position.

Reply Quote

That's unfortunate, as it's required that I use YUI popups, as our entire application uses them. This probably will mean we won't be buying license, even though this editor is top of our list. Thanks for the reply, Adam.

03-17-2008, 2:46 PM 38055 in reply to 33394

sfcalvert
Joined on 03-13-2008
Posts 9

Re: Inserting an image at current cursor position.

Reply Quote

I managed to fix this issue. I essentially store the selection while my popup is open, then restore it when I'm closing it. Here's the code:

getSelection = function() {
    var c = document.getElementById('cuteEditor1');
    if(c){
        return c.GetSelection();
    }
}

createRange = function() {
    var selection = getSelection();
    if(selection){
        if(selection.createRange) {
            return selection.createRange();
        }
        if(selection.rangeCount && selection.getRangeAt) {
            return selection.getRangeAt(0);
        }
    }
    return null;
}

select = function(range) {
    if(range.select)
        range.select();
    else {
        var selection = getSelection();
        if(selection.removeAllRanges && selection.addRange){
            selection.removeAllRanges();
            selection.addRange(range);
        }
    }
}

restoreSelection = function() {
    if(window.range)
        select(window.range);
}

storeSelection = function() {
    window.range = createRange();

}

I basically call storeSelection when my popup is being opened. Then, before my popup closes I restore selection to the editor using restoreSelection.

Hope this helps someone out.