EO.Web Editor is fully customizable. This article outlines how to add "Insert Flash" feature to the Editor, which involves:
1. Adding a custom toolbar button;
2. Invoking a dialog when the toolbar button is clicked;
3. Support browsing and uploading from the dialog;
4. Insert the selected Flash object to the Editor when "OK" is clicked in the dialog;
Please keep in mind that even though the code in this sample is for inserting Flash object, it actually demonstrates that you can extend the Editor to insert almost anything.
Adding a custom toolbar buttonTo add a custom toolbar button, right click the editor, then select "Edit Template -> CustomHeader Template". This switches the Editor to template editing mode. One or more default toolbar should appear in design view. Edit the toolbar to add your custom button(s).
If you wish to trigger a dialog from this button, then set the new toolbar button's ImageUrl and CommandName. Make sure the CommandName value is unique. If you wish to trigger your own JavaScript code from this button, then set the button's Type to "Custom" and switch to HTML view to edit the custom button. For example, the following button displays a static text "Please click me!" and shows an alert "clicked!" when it is clicked:
Code: HTML/ASPX
<eo:ToolBarButton CommandName="click_test" Type="Custom">
<CustomItem>
<div onclick="alert('clicked!');">Please click me!</div>
</CustomItem>
</eo:ToolBarButton>
Invoking a dialog when the toolbar button is clicked A dialog and a toolbar button are linked together through their
CommandName. Once you add've added a toolbar button with a CommandName, you can add a dialog to respond that button. For example, if the CommandName for the toolbar button is set as "InsertFlash", then you can place the following markup inside your Editor so that the Editor displays a dialog when "InsertFlash" button is clicked:
Code: HTML/ASPX
<DialogContents>
<eo:EditorDialogContent Title="Insert Flash" CommandName="InsertFlash">
<ContentTemplate>
<div style="width:300px">
Flash Url:
<input type="text" name="flash_url" />
</div>
<p>
<input type="button" name="eo_editor_default_button"
value="OK" style="width: 80px;"
onclick="insert_flash(eo_GetContainer(this, 'Editor'), this, event);" />
<input type="button" value="Close" style="width: 80px;"
onclick="eo_GetContainer(this, 'Editor').closeDialog(this, event);" />
</p>
</ContentTemplate>
</eo:EditorDialogContent>
</DialogContents>
The code displays a simple textbox with two buttons "OK" and "Cancel". It calls "insert_flash" when "OK" is called (see below) and calls closeDialog method on the Editor object to close the dialog when "Cancel" is called. You can customize the dialog to include other elements as well.
Support browsing and uploading from the dialogBrowsing and uploading are done through FileExplorer control. Please refer any Editor sample pages that support file browsing (such as Insert Image) to have FileExplorer control setup correctly first, then add the following code to the dialog to add a browse button:
Code: HTML/ASPX
<input type="button" style="width:20px" value="..."
onclick="eo_GetContainer(this, 'Editor').browseFile(this, 'flash_url', 'Browse Flash, 'flash_files');" />
The code calls this function to display the FileExplorer:
http://doc.essentialobjects.com/library/1/jsdoc.public.editor.browsefile.aspxIf you use the sample code, you will also need to modify Demos\File Explorer\Explorer.aspx.cs (or .vb) to check query string "eo_editor_browseFile_profile" against the profile value you passed in from your HTML code (in this case "flash_files"). If the profile matches, you should set the FileExploer's AllowedExtension to only allow flash files. The existing sample code checks for image files only.
Insert the selected Flash object to the Editor The dialog calls insert_flash JavaScript function when "OK" button is clicked, you must provide this function. The function can be something like this:
Code: JavaScript
function insert_flash(editor, srcElement, event)
{
if (!event)
event = window.event;
//Get the flash Url
var urlInput = document.getElementsByName("flash_url")[0];
//Make sure user has entered something
if (!urlInput.value)
{
alert("Please enter the Url");
return;
}
//Close the dialog first
editor.closeDialog(srcElement, event);
//Now format the flash HTML based on the Url user entered
var html = "<embed src='" + urlInput.value +
"' type='application/x-shockwave-flash' " +
"width='200' height='150'></embed>";
//Insert the HTML into the editor
editor.execCommand('InsertHTML', html);
}
Two key functions are "closeDialog", which close the dialog and "execCommand", which actually inserts the HTML to the editor.
See here for a list of available JavaScript methods on the Editor object:
http://doc.essentialobjects.com/library/1/jsdoc.public.editor.aspxHope this helps.
Thanks