RadEditor provides a flexible mechanism for adding custom dialogs that plug directly into the undo/redo mechanism and have the Telerik RadEditor look and feel. In addition, the editor provides the developer with the ability to specify arguments to be passed to the custom dialog and back to the editor.

Here are the steps to create and add a custom Insert Link dialog to RadEditor's toolbar.

To display your own icon for the InsertSpecialLink button set the following style tag in your page: <style type="text/css">.reToolbar.Default .InsertSpecialLink{ background-image: url(Custom.gif);} </style>

The custom command functions are to open a specified custom dialog and to supply arguments from the main page to the opened dialog by firing the showExternalDialog method. The editor's showExternalDialog() method has the following arguments:

The next step is to create the dialog aspx file. For this scenario, you should create a page named InsertLink.aspx. Once the dialog file is created add the following JavaScript code in it as well as the code for the link insertion:

function insertLink() //fires when the Insert Link button is clicked{//create an object and set some custom properties to it workLink.href = linkUrl.value;workLink.target = linkTarget.value;workLink.className = linkClass.value;workLink.name = linkName.value;

getRadWindow().close(workLink); //use the close function of the getRadWindow to close the dialog and pass the arguments from the dialog to the callback function on the main page.}</script>

When the getRadWindow().close(closeArguments) is fired it will pass the closeArguments value to the myCallbackFunction function on the main page. Thus you will be able to construct an HTML link and paste it in the editor with the pasteHtml function: