SaaS CMS has officially launched! Learn more now.

Extending DHTML Editor to add snippets of HTML

Hi, I'm trying to extend the DHTML editor by creating various dialogs that will allow the customers to insert some common 'snippets' of HTML that they will use everyday. I have a number of questions: 1) From the dialogs I am creating the user will be able to select various images and links and therefore I am opening the standard EPiServer dialog boxes (HyperlinkImageProperties.aspx and HyperlinkProperties.aspx). Is there a standard way that I should be opening these dialog boxes as they expect an object to be passed to them with various properties to be set in order for it to function correctly? Is there a code sample showing this? 2) I have been unsuccessful in creating a menu item on the context menu with a sub menu appearing from it. Is there a code sample to show this? 3) Is there a code sample to show how to use the property for disabling a particular menu item on the context menu. 4) Is it possible to add menu items to the context menus 'Select' and 'Insert'. If so how do I do this? Cheers, Andy
Jan 03, 2006 9:17
Hello Andy, let me try to answer your questions in order. 1) As you have noticed, our dialogs sometime expect a certain context. The dialogs you mention carry an object containing the various attributes you can modify in the dialog box, and you should probably create your own object in the correct format. As for code samples, you actually already have access to the full javascript code used in EPiServer's Editor tools. Check the various files in the Util/Javascript/Editor folder, for instance ImageProperties.js, to see the javascript calls we use to correctly initialize the dialogs (and mimic them). 2)A sub menu is basically just another (very simple) Editor tool, without any click-handlers etc. Use the EditorPlugInAttribute just as for a normal tool, but add a value for the "SubMenuName" attribute. This will be the name of your submenu. Then you can create other tools with the "MenuName" attribute set to your submenu name, to get them to show up in your custom submenu (the submenu will not appear if it has no tools in it). See also the answer to 4, below. Simple code sample: [EditorPlugIn(DisplayName="My Submenu", Usage=ToolUsage.ContextMenu, SubMenuName="MySubMenu")] public class MySubMenuContainer : ToolBase { } 3) Whether any given tool is available or not can be controlled both on the server side and client side. To use server side logic to decide if a tool should be available or not, let your tool implement the IConfigurableTool interface. Implement the "Available" method to return a boolean value based on custom logic. Simple code sample: bool IConfigurableTool.Available(HtmlEditor editor) { return CustomLogicForAvailabilityHere(); } To enable/disable a tool based on client side logic, assign a call to some javascript function for ToolBase.ClientSideEnabled in your tool implementation. Normally you want to pass in the ID of the correct editor instance to the function, so you can check whether the user has any current text selections or similar in the editor. Simple code sample snippet: public class MyTool : ToolBase, IInitializableTool { void IInitializableTool.Initialize(HtmlEditor editor) { ClientSideEnabled = String.Format("MyJavaScriptFunctionHere('{0}')", editor.ClientID); // Other code to initialize your tool... } } 4) Yes, you are free to add your own tools to any of the submenus. You simply specify the "MenuName" attribute of your EditorPlugInAttribute to the name of the submenu you want the tool to appear in. I am currently not sure if/where that information is available, but the names of the built-in submenus are: - SelectMenu - InsertMenu - TableMenu - FormatParagraphMenu Good luck with your editor plug-ins!
Jan 09, 2006 15:57
Thanks for your help. I have managed to mimic opening the dialogs but I have had to create my own functions to create the objects as the functions available do more than just create the object to be passed to the dialog. It would be good if the functionality for creating the object could be separated from the functionality for pasting into the editor (as I am not pasting directly into the editor). Therefore, if any changes are made to the objects passed to the dialogs in the future no changes would be necessary for opening the dialogs. The information for the building of sub menus and enabling/disabling was great thanks as it isn't obvious from the documentation how it works. It would be great if these code samples were added to the documentation.
Jan 12, 2006 13:08
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.