add image caption option

[Marja]

Dear All,
Does anyone know how to add an option for image caption to the latest (full version )radeditor?

Kind Regards,
Marja

[Stanimir]

Hello Marja,

Could you please be more specific on what exactly do you want to achieve? A screen shot of where you expect the caption option to appear, will be helpful as well.

Thank you.

Kind regards,
Stanimir
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Marja]

Dear Stanimir ,

What I mean is that if users upload an image to go with their article for instance they want to add a description to go with the image. (a name underneath a phot for instance).
I don't have a screenshot but this is what I mean:
http://example.typepad.com/photos/uncategorized/2008/02/20/imagecaption.jpg

Kind Regards,
Marja

[Stanimir]

Hi Marja,

In the Program Files\Common Files\Microsoft Shared\web server extensions\wpresources\RadEditorSharePoint\4.5.4.0__1f131a624888eeed\RadControls\Editor\Dialogs folder you can find the ImageManager.ascx where you can modify the ImageManger dialogue and add the field, which the user can use to add the image caption.

Afterwords you need to modify MOSSEditorTools.js located in  C:\Program Files\Common Files\Microsoft Shared\web server extensions\wpresources\RadEditorSharePoint\4.5.4.0__1f131a624888eeed\RadControls\Editor\Scripts\7_3_4 folder. Add the following javascript code.

RadEditorCommandList["ImageManager"] =
    function (commandName, editor, oTool)
    {
        var callBackFn = function(retValue, params)
        {
            //Here you can use PasteHtml method of the Editor to paste the image + caption
            //var editor = params.editor;
            //editor.PasteHtml(HTMLCode);
        };
        var argument = {};

        argument.InternalParameters = editor.GetDialogInternalParameters(commandName);
        var dialogUrl = editor.GetDialogUrl(commandName);

        var selectedImage = editor.GetSelectedElement();
        if (selectedImage && selectedImage.tagName && selectedImage.tagName.toLowerCase() == "img")
        {
            dialogUrl += "&selectedObjectPath=" + RadEditorNamespace.Utils.RemoveProtocolNameAndServerName(selectedImage.src);
        }

        editor.ShowDialog(dialogUrl
            , argument
            , 400
            , 300
            , callBackFn
            , null
            , editor.Localization[commandName]);
        return false;
    };

I hope this helps.

Greetings,
Stanimir
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[David]

Has this functionality been added to the RadEditor or its ImageManager? If not, what would be the best way to implement this functionality with the current version of controls?

[Rumen]

Hello David,

I am afraid, there is no built-in option that can enable such functionality.

This is a custom solution and should be implemented by customizing the built-in Image Manager dialog. How to customize any of the built-in dialogs is demonstrates in this demo--http://demos.telerik.com/aspnet-ajax/editor/examples/externaldialogspath/defaultcs.aspx.

For SharePoint you can use the solution provided by Stanimir in this thread.

Regards,
Rumen
Telerik by Progress