How to change the behaviour of the Image Manager's Insert-Button?

[Ricky Mattischeck]

Hi,

is there any possibility to extend or overwrite the behaviour of the insert-button in the Image Manager (see my attached screenshot)?
Currently I use my own EditorDialogs which consist of the copied RadEditor/EditorDialogs with some minor modifications.

My main target is to replace the default <img src="/images/image.jpg"...>-insertion that is added to the text after clicking "insert" by my own that uses a streaming-component as src like this one: <img src="getImage.ashx?file=image.jpg"...>

Do you have some source code for me?

Thank you very much!

Greeting from germany,
Ricky Mattischeck

[pmoney pmoney]

I'm also having a similar issue.
Whenever I insert an image it for some reason doesn't have the right src, so I would like to be able to change the src of the images on the fly when the user hits the insert button.

Please help us!
Thanks...

[Dobromir]

Hi Ricky,

RadEditor's Client-Side API provides the possibility to extend the functionality of its commands by registering a callback function.

The following example demonstrates how to change the modify the inserted image src attribute:

<script type="text/javascript">
    function changeImageManager(editor, args) {
        if (args.get_commandName() == "ImageManager") {

            var callbackFunction = function(sender, args) {
                var result = args.get_value();//get returned value of ImageManager which is IMG element
                result.src = "somefile.ascx?file=" + result.src.substring(result.src.lastIndexOf("/")+1, result.src.length);

                result = Telerik.Web.UI.Editor.Utils.getOuterHtml(result);//get HTML source of the DOM element

                editor.pasteHtml(result, "ImageManager");
            };

            args.set_callbackFunction(callbackFunction);//register callback function
        }
    }
</script>
<telerik:radeditor runat="server" ID="RadEditor1" OnClientCommandExecuting="changeImageManager">
    <ImageManager ViewPaths="~/images" UploadPaths="~/images" />
</telerik:radeditor>

I hope this helps.

Kind regards,
Dobromir
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Ricky Mattischeck]

This is great, exactly what I was looking for! Thank you very much!

I love the Telerik-Support-Team! :-)

[pmoney pmoney]

Where exactly do i put this code???
It's not working for me when I put the javascript on the same page as the editor.
Please help!

[Ricky Mattischeck]

Have you also set this parameter on your editor-tag?

OnClientCommandExecuting="changeImageManager"

Do you get any error-message? Have you tried to set an 'alert("test");' in the beginning of the changeImageManager-Function?

[pmoney pmoney]

This solution doesn't seem like it does what it is you asked about.
I got the function to work but, it fires the changeImageManager event when the Image Manager button is pressed on the editors toolbar.
Im wanting it to fire when the user clicks the insert button after uploading or selecting an image, then replacing that img path with a value.
Can you help?

[Ricky Mattischeck]

In my case, it exactly has this behaviour as you described it... Can you post your code?

[pmoney pmoney]

Im sorry, it does work! :)
I made a coding mistake....
Thanks a lot guys!!!!

[gkennedy]

Is it possible to do this with the older non-ajax control (RadEditor.Net2.dll - runtime ver v2.0.50727)?

Greg

[Rumen]

Hi Greg,

The following KB article could be helpful: Inserting images with predefined attributes via the Image Manager.


Kind regards,
Rumen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[gkennedy]

Thanks Rumen. That's exactly what I was after but couldn't find by searching.
The last piece of the puzzle was to work out the alt text property returned by the editor (result.imageAltText)