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

12 posts, 1 answers
  1. Ricky Mattischeck
    Ricky Mattischeck avatar
    12 posts
    Member since:
    Oct 2009

    Posted 08 Jan 2010 Link to this post

    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
  2. pmoney pmoney
    pmoney pmoney avatar
    23 posts
    Member since:
    Dec 2009

    Posted 08 Jan 2010 Link to this post

    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...
  3. Answer
    Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 11 Jan 2010 Link to this post

    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.
  4. Ricky Mattischeck
    Ricky Mattischeck avatar
    12 posts
    Member since:
    Oct 2009

    Posted 11 Jan 2010 Link to this post

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

    I love the Telerik-Support-Team! :-)
  5. pmoney pmoney
    pmoney pmoney avatar
    23 posts
    Member since:
    Dec 2009

    Posted 12 Jan 2010 Link to this post

    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!
  6. Ricky Mattischeck
    Ricky Mattischeck avatar
    12 posts
    Member since:
    Oct 2009

    Posted 12 Jan 2010 Link to this post

    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?
  7. pmoney pmoney
    pmoney pmoney avatar
    23 posts
    Member since:
    Dec 2009

    Posted 12 Jan 2010 Link to this post

    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?
  8. Ricky Mattischeck
    Ricky Mattischeck avatar
    12 posts
    Member since:
    Oct 2009

    Posted 12 Jan 2010 Link to this post

    In my case, it exactly has this behaviour as you described it... Can you post your code?
  9. pmoney pmoney
    pmoney pmoney avatar
    23 posts
    Member since:
    Dec 2009

    Posted 12 Jan 2010 Link to this post

    Im sorry, it does work! :)
    I made a coding mistake....
    Thanks a lot guys!!!!
  10. gkennedy
    gkennedy avatar
    3 posts
    Member since:
    Jul 2008

    Posted 31 May 2010 Link to this post

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

    Greg
  11. Rumen
    Admin
    Rumen avatar
    13895 posts

    Posted 31 May 2010 Link to this post

    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.
  12. gkennedy
    gkennedy avatar
    3 posts
    Member since:
    Jul 2008

    Posted 31 May 2010 Link to this post

    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)
Back to Top