RadEditor: OnClientPasteHtml(sender, args) calling args.get_

Posted by Community Admin on 07-Mar-2012 00:00

Hi,

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

Set up a toolsfile.xml with info from here
http://www.sitefinity.com/devnet/forums/sitefinity-4-x/general-discussions/content-block-editor---toolsfile-xml.aspx

And was able to get this to work:
http://www.sitefinity.com/blogs/joshmorales/posts/11-07-26/customizing_sitefinity_4_controls_with_the_viewmap.aspx

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

ToolsFile.xml

<?xml version="1.0" encoding="utf-8" ?>

<root>

<modules>

<module name="RadEditorStatistics" dockingZone="Bottom" visible="false" />

<module name="RadEditorDomInspector" visible="false" />

<module name="RadEditorNodeInspector" visible="false" />

<module name="RadEditorHtmlInspector" visible="false" />

</modules>

<tools>

<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" />

</tools>

</root>

HtmlFieldTemplate.ascs

<%@ 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">

<Templates>

<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>

<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" />

</sf:ResourceLinks>

<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">

<telerik:RadEditor

ID="editControl"

runat="server"

Skin="Sitefinity"

Width="100%"

Height="550px"

EnableResize="False"

EditModes="Design,HTML"

DialogHandlerUrl="~/Telerik.Web.UI.DialogHandler.axd"

Content=""

NewLineBr="False"

StripFormattingOptions="Css,Font,Span"

OnClientPasteHtml="OnClientPasteHtml"

ToolsFile="~/App_Data/RadEditor/ToolsFile.xml" >

<FlashManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />

</telerik:RadEditor>

<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" />

</asp:Panel>

<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);

console.log(img);

//Set new content to be pasted into the editor

args.set_value(div.innerHTML);

</script>

</sf:ConditionalTemplate>

</Templates>

</sf:ConditionalTemplateContainer>

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?

thanks,
-trevor

Posted by Community Admin on 10-Mar-2012 00:00

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.

Regards,
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

Posted by Community Admin on 10-Mar-2012 00:00

Thanks.

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:
http://www.sitefinity.com/devnet/forums/sitefinity/general-discussions/content-block-editor---wrap-text-around-images.aspx

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?

thanks,
-trevor

Posted by Community Admin on 10-Mar-2012 00:00

set_callbackFunction also seems to do nothing.

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

thanks.

Posted by Community Admin on 11-Mar-2012 00:00

OnClientSubmit callback also does not seem to call any functions when it should.

Posted by Community Admin on 12-Mar-2012 00:00

OnClientCommandExecuted also seems to not do anything for ImageManager... ideas?

Posted by Community Admin on 16-Mar-2012 00:00

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?

Posted by Community Admin on 27-Jan-2015 00:00

Did you ever find a solution to this? I'm trying the exact same thing and having the same results.

This thread is closed

All Replies