Completed
Last Updated: 01 May 2018 15:13 by ADMIN
Christian
Created on: 25 Nov 2016 07:40
Category: Editor
Type: Feature Request
0
Add image description in Editor
Hi,

Several of my clients has requested along the years for a way to insert Descriptions just beneth/under a image in the Editor, i have had to move to CKEditor in some cases and thought i would just give it a try and post this as a feature request.

A demo of this can be seen here,
http://ckeditor.com/

Think what they do is insert a Div under the image object that contains a Description.

Really hoping to see this in the future as i would like to keep third party plugins to a minimum.

Christian
1 comment
ADMIN
Rumen
Posted on: 01 May 2018 15:13
You can easily add a prompt window to collect the image caption text and append it to the inserted image when inserting an image through the image manager. This can be done via the OnClientPasteHtml event of RadEditor:

<script type="text/javascript">
    function OnClientPasteHtml(sender, args) {
        var commandName = args.get_commandName();
        var value = args.get_value();

        if (commandName == "ImageManager") {
            //See if an img has an alt tag set 
            var div = document.createElement("DIV");

            //Do not use div.innerHTML as in IE this would cause the image's src or the link's href to be converted to absolute path.
            //This is a severe IE quirk.
            Telerik.Web.UI.Editor.Utils.setElementInnerHtml(div, value);

            //Now check if there is alt attribute 
            var img = div.firstChild;
            if (!img.alt) {
                var caption = prompt("Enter Image Caption", "");
                        

                //Set new content to be pasted into the editor 
                args.set_value(div.innerHTML + "<br/><div style='font-style: italic;font-size: 11px;'>" + caption + "</div>");
            }
        }
    }
</script>
<telerik:RadEditor runat="server"
    OnClientPasteHtml="OnClientPasteHtml"
    ImageManager-ViewPaths="~/Images"
    ID="RadEditor1">
</telerik:RadEditor>