TinyMCE is the fantastic WYSIWYG freeware tool, it is a great advantage to the Content Management System. Easily integrate with the .Net application with the bunch of javascripts.
Initial integration is very easy with TinyMCE, I struc a bit when it comes to browse the image using the Image Control.
Here we have basically 2 forms of a image control over the toolbar, One is the Simple one and another is the Advance Plugin ADVIMAGE.
We get a Add/Edit image diaglog box to browse the images, from the right side of the Image URL caption: figure1.
figure1: Here it requires to implemet a custom Image/File browser.
---------
--------
---------
file_browser_callback : "fileBrowserCallBack",
theme_advanced_resize_horizontal : false,
theme_advanced_resizing : true
});
function fileBrowserCallBack(field_name, url, type, win) {
// This is where you insert your custom filebrowser logic
alert("Example of filebrowser callback: field_name: " + field_name + ", url: " + url + ", type: " + type);
// Insert new URL, this would normaly be done in a popup
win.document.forms[0].elements[field_name].value = "someurl.htm";
}
FileBrowserCallBack function description:-
This option enables you to add your own file browser/image browser to TinyMCE. This function is executed each time a user clicks on the "browse" buttons in various dialogs. The format of this callback function is: fileBrowser(field_name, url, type, win) where:-
field_name:- id/name of the form element that the browser should insert it's URL into.
url:- url parameter contains the URL value that is currently inside the field.
type:- type parameter contains what type of browser to present this value can be file, image or flash depending on
what dialog is calling the function.
win:- win parameter contains a reference to the dialog/window that executes the function.
Example of usage of the file_browser_callback option:
function myCustomFileBrowser(field_name, url, type, win) {
// Do custom browser logic
win.open('ImageBrowser.aspx', 'ImageBrowser', 'width=300,height=200,scrollbars=yes,status=yes,location=no,resizable=yes,dependent');
}
above function will load your custom ImageBrowser.aspx page. Now we can update the value of the Image url using the following javascript function in ImageBrowser.aspx.
Now following Javascript function will be used to pass the selected image path from the FileBrowser.aspx to the Add/Edit Image window.
//Call the above function....
javascript:SelectImage('your image path')"
Description of Opner and Open function:-
Window.Opener
http://www.webreference.com/js/tutorial1/opener.html
Window.Open
http://www.javascript-coder.com/window-popup/javascript-window-open.phtml
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/open_0.asp
This example suffice to customize the file browser implementation.
TinyMCE Forum: http://tinymce.moxiecode.com/punbb/viewtopic.php?id=4044
--cheers