OBSOLETE:
Starting with version 15.1 custom dialog froms are not supported.
ASPxHtmlEditor provides a rich API to edit Html content including the capability to operate built-in toolbars. However, sometimes the embedded functionality is not enough, and you may wish to add a custom feature to the default functionality. For instance, ASPxHtmlEditor does not allow end-users to choose an image when inserting a link. Such tasks can be easily implemented by extending built-in dialog forms.
This example illustrates how to enlarge a built-in dialog form, in particular add an image chooser to the InsertLinkForm dialog. To utilize this scenario, perform the following steps:
1. Extract built-in ASPxHtmlEditor dialog forms to your application folder:
Design Time -> ASPxHtmlEditor's Smart Tag - > “Copy Default Dialog Forms to the Project" command;
2. Add ASPxUploadControl to the InsertLinkForm.ascx page to allow end-users to choose a desired image;
3. Modify the OnOkButtonClick_InsertLinkForm function as follows:
a) If ASPxUploadControl does not contain any file, call the aspxDialogComplete method to insert a link without an image;
b) If ASPxUploadControl contains a file (an upload editor has text), first upload the file and save it to a psychical folder. After completing this operation, call the aspxDialogComplete method to insert a link with an image:
[JScript]function OnOkButtonClick_InsertLinkForm(){if(IsValidFields_InsertLinkForm()){if(_dxeUplImage.GetText() != ""){ _dxeUplImage.Upload();}else{ aspxDialogComplete(1, GetDialogData_InsertLinkForm(""));}}}//ASPxClientUploadControl.FilesUploadComplete Event function aspxImageLinkUploadComplete(e){ aspxDialogComplete(1, GetDialogData_InsertLinkForm(e.callbackData));}
4. Handle the ASPxUploadControl.FileUploadComplete event to save the uploaded file to the application directory;
5. Send a path of the just saved file to the client side as the CallbackData parameter:
[C#]protectedvoiduplImage_FileUploadComplete(objectsender,DevExpress.Web.ASPxUploadControl.FileUploadCompleteEventArgsargs){try{args.CallbackData=SaveUploadFile();}catch(Exceptione){args.IsValid=false;args.ErrorText=e.Message;}}
6. To insert a link with an image, modify the GetDialogData_InsertLinkForm code as follows:
[JScript]if(image == ""){ res.text = _dxeTxbText.GetText();}else{ res.text = _dxeTxbText.GetText() + '<img alt="" src="' + image + '" />';}
The «res» contains text that will be inserted into ASPxHtmlEditor.
By design, ASPxHtmlEditor converts tags (e.g. <img>) to special symbols when inserting text. To prevent this, add the following non-public function to a JavaScript block: