More in this section

Forums / Bugs & Issues / RadEditor: OnClientPasteHtml(sender, args) calling args.get_commandName() returns "undefined"

RadEditor: OnClientPasteHtml(sender, args) calling args.get_commandName() returns "undefined"

8 posts, 0 answered
  1. Trevor
    Trevor avatar
    35 posts
    28 Jan 2012
    07 Mar 2012
    Link to this post

    I am trying to add a callback script to modifications made by the ImageManager.

    Set up a toolsfile.xml with info from here 

    And was able to get this to work: 

    I have got the tools file mapped and can edit what tools go into the WYSIWYG toolbar, that's not a problem for me -- I just wanted to include that information in case somehow that is conflicting with the behavior of the ImageManager tool.

    The ImageManager control seems to be functioning just fine, but for some reason the second argument, "args" of the designated OnClientPasteHtml callback function is only returning "undefined" when I call args.get_commandName();

    I need this to return something useful, so I can have my script execute an alteration to the returned <img> tag.

    I can't find all of the documentation I found earlier about how to get my own ASCX file to be used in place of the default ImageManager control -- I can't find it now on your site or any of the many blogs and forums that are out there... it took me all day the first time, and now I can't find it again :(
    -- but I know I have done the following:

    1) Created a new ToolsFile.xml and copied/modified a HTMLFieldTemplate.ascx file.
    2) Maped the control in Administration > Settings > Advanced > Controls > ViewMap
    3) Entered Telerik.Sitefinity.Web.UI.Fields.HtmlField as the hosttype, and the full path to my HTMLFieldTemplate.ascx file.
    4) On the RadEditor tag within HTMLFieldTemplate.ascx, set the ToolsFile property, and point it towards my ToolsFile.xml

    <?xml version="1.0" encoding="utf-8" ?>
            <module name="RadEditorStatistics" dockingZone="Bottom" visible="false" />
            <module name="RadEditorDomInspector" visible="false" />
            <module name="RadEditorNodeInspector" visible="false" />
            <module name="RadEditorHtmlInspector" visible="false" />
            <tool name="Bold" shortcut="CTRL+B"/>
            <tool name="Italic" shortcut="CTRL+I"/>
            <tool separator="true"/>
            <tool name="LinkManager" shortcut="CTRL+K"/>
            <tool name="Unlink" shortcut="CTRL+SHIFT+K"/>
            <tool name="ImageManager" shortcut="CTRL+G"/>
            <tool separator="true"/>
            <tool name="AjaxSpellCheck"/>
            <tool separator="true"/>
            <tool name="PasteFromWord" />
            <tool separator="true"/>
            <tool name="JustifyLeft" />
            <tool name="JustifyRight" />
            <tool name="JustifyCenter" />
            <tool name="JustifyFull" />
            <tool separator="true"/>
            <tool name="Indent" />
            <tool name="Outdent" />

    <%@ Control Language="C#" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Extenders" TagPrefix="sf" %>
    <sf:ConditionalTemplateContainer ID="ConditionalTemplateContainer1" runat="server">
            <sf:ConditionalTemplate ID="ConditionalTemplate1" Left="DisplayMode" Operator="Equal" Right="Read" runat="server">
                <sf:SitefinityLabel id="titleLabel_read" runat="server" WrapperTagName="div" HideIfNoText="false" CssClass="sfTxtLbl" />
                <sf:SitefinityLabel id="viewControl" runat="server" WrapperTagName="div" HideIfNoText="false" CssClass="sfRTFContent" />
            <sf:ConditionalTemplate ID="ConditionalTemplate2" Left="DisplayMode" Operator="Equal" Right="Write" runat="server">
                <sf:ResourceLinks id="resourcesLinks2" runat="server">
                    <sf:EmbeddedResourcePropertySetter Name="Telerik.Sitefinity.Resources.Themes.Default.Styles.EditorDialogs.css" Static="true" ControlID="editControl" ControlPropertyName="DialogsCssFile" />
                    <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Themes.Default.Styles.Window.css" Static="true" />
                <asp:Label ID="titleLabel_write" runat="server" CssClass="sfTxtLbl" AssociatedControlID="editControl" />
                <asp:LinkButton ID="expandLink" runat="server" OnClientClick="return false;" CssClass="sfOptionalExpander" />
                <asp:Panel ID="expandableTarget" runat="server" CssClass="sfEditorWrp sfClearfix">
                        ToolsFile="~/App_Data/RadEditor/ToolsFile.xml" >
                        <FlashManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
                    <sf:RadEditorCustomDialogsExtender runat="server" id="editorCustomDialogsExtender" TargetControlID="editControl"/>
                    <sf:SitefinityLabel id="descriptionLabel" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfDescription" />
                    <sf:SitefinityLabel id="exampleLabel" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfExample" />
                <script type="text/javascript">
                    function OnClientPasteHtml(sender, args) {
                        var commandName = args.get_commandName();
                        var value = args.get_value();
                        if (commandName == "ImageManager") {
                            console.log("image manager command");
                            //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 alt = prompt("No alt tag specified. Please specify an alt attribute for the image", "");
                                img.setAttribute("alt", alt);
                                //Set new content to be pasted into the editor       

    But this line:
    var commandName = args.get_commandName();

    Always sets "commandName" to "undefined"

    As you can see I put in console.log() into the code to track progress in the code.  I can get the console to log in the callback function, and can see that it is in fact receiving the sender and args arguments.  args.get_value() returns what I'd expect, a nicely assembled <img> attribute, but the args.get_commandName() fails.

    Can you please tell me what is wrong with my code?

  2. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    28 Aug 2017
    10 Mar 2012
    Link to this post
    Hi Trevor,

    Actually the default ImageManager, HyperLinkManager, and DocumentManager dialogs for RadEditor ahve been substituted with custom ones in HtmlField control, so we can allow users to include content from Sitefinity libraries in RadEditor. Actually we're cancelling the default ImageManager and substituting it with ours, that's why the argument for commandName is undefined. However, thank you very much for pointing out the need for such functionality, currently a possible workaround would be to check if the value starts with <img tag and then check for the alt tag substitution.

    Boyan Barnev
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Trevor
    Trevor avatar
    35 posts
    28 Jan 2012
    10 Mar 2012
    Link to this post

    Is there anywhere documentation about the manager Sitefinity uses in place of RadEditor's ImageManager?

    I need to modify this so the client can enter captions with HTML.

    Related is this post: 

    It seems that the Sitefinity ImageManager does not allow margins to be assigned to floating images.  I plan on using JavaScript in the OnClientPasteHtml callback to assign wrapper with a CSS class that defines the margins.  

    I'd also like to alter the Image Properties dialog to include a textfield that would allow html to be entered for a caption...

    I can change for "<img " for the value of args in the OnClientPasteHtml callback, but how does one alter the ImageManager dialog to include an additional field that then has a value passed to the callback or as part of the image tag?

  4. Trevor
    Trevor avatar
    35 posts
    28 Jan 2012
    10 Mar 2012
    Link to this post
    set_callbackFunction also seems to do nothing.

    Any applicable documentation on this Sitefinity Imagemanager would be extremely useful.

  5. Trevor
    Trevor avatar
    35 posts
    28 Jan 2012
    11 Mar 2012
    Link to this post
    OnClientSubmit callback also does not seem to call any functions when it should.
  6. Trevor
    Trevor avatar
    35 posts
    28 Jan 2012
    12 Mar 2012
    Link to this post
    OnClientCommandExecuted also seems to not do anything for ImageManager... ideas?
  7. Trevor
    Trevor avatar
    35 posts
    28 Jan 2012
    16 Mar 2012
    Link to this post
    Any help on this would be great.  Checking for "<img" at the start of the value variable fails if the user chooses to have the image be a thumbnail link to a larger image.  Why do the RadEditor javascript API functions fail in SiteFinity?  Where can I find documentation for the SiteFinity editor?
  8. Nick
    Nick avatar
    1 posts
    25 Apr 2013
    27 Jan 2015
    Link to this post
    Did you ever find a solution to this?  I'm trying the exact same thing and having the same results.
8 posts, 0 answered