This is a migrated thread and some comments may be shown as answers.

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

11 Answers 229 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Ricky Mattischeck
Top achievements
Rank 1
Ricky Mattischeck asked on 08 Jan 2010, 04:24 PM
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

11 Answers, 1 is accepted

Sort by
0
pmoney pmoney
Top achievements
Rank 1
answered on 08 Jan 2010, 10:08 PM
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...
0
Accepted
Dobromir
Telerik team
answered on 11 Jan 2010, 11:39 AM
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.
0
Ricky Mattischeck
Top achievements
Rank 1
answered on 11 Jan 2010, 12:35 PM
This is great, exactly what I was looking for! Thank you very much!

I love the Telerik-Support-Team! :-)
0
pmoney pmoney
Top achievements
Rank 1
answered on 12 Jan 2010, 03:21 PM
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!
0
Ricky Mattischeck
Top achievements
Rank 1
answered on 12 Jan 2010, 04:28 PM
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?
0
pmoney pmoney
Top achievements
Rank 1
answered on 12 Jan 2010, 05:03 PM
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?
0
Ricky Mattischeck
Top achievements
Rank 1
answered on 12 Jan 2010, 05:06 PM
In my case, it exactly has this behaviour as you described it... Can you post your code?
0
pmoney pmoney
Top achievements
Rank 1
answered on 12 Jan 2010, 05:10 PM
Im sorry, it does work! :)
I made a coding mistake....
Thanks a lot guys!!!!
0
gkennedy
Top achievements
Rank 1
answered on 31 May 2010, 05:07 AM
Is it possible to do this with the older non-ajax control (RadEditor.Net2.dll - runtime ver v2.0.50727)?

Greg
0
Rumen
Telerik team
answered on 31 May 2010, 03:53 PM
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.
0
gkennedy
Top achievements
Rank 1
answered on 31 May 2010, 11:42 PM
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)
Tags
Editor
Asked by
Ricky Mattischeck
Top achievements
Rank 1
Answers by
pmoney pmoney
Top achievements
Rank 1
Dobromir
Telerik team
Ricky Mattischeck
Top achievements
Rank 1
gkennedy
Top achievements
Rank 1
Rumen
Telerik team
Share this question
or