Geeks With Blogs

News
Employers
Soppa Group India
iSmart Panache Inc
R Systems Internationals Ltd
Technovate eSolutions Pvt Ltd
The contents of this blog are my personal opinion and do not represent in any way the view of my employer.
These postings are provided "AS IS" with no warranties, and confer no rights.

Google PR™ - Post your Page Rank with MyGooglePageRank.com

Narendra Tiwari

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

Posted on Friday, July 14, 2006 2:44 PM .Net | Back to top


Comments on this post: TinyMCE FileBrowserCallBack implementation

# re: TinyMCE FileBrowserCallBack implementation
Requesting Gravatar...
it causing error: EVENTTARGET is null or not an object. any idea?
Left by yudi on Mar 06, 2007 8:20 AM

# re: TinyMCE FileBrowserCallBack implementation
Requesting Gravatar...
I used your tutorial got me page sucesfully loading but i dont no where to place javascript:SelectImage('your image path')" i have loaded the tiny_mce_popup.js in the site can you help its not setting a value also how would one set the alt text as well
Left by dave on Oct 14, 2011 3:57 PM

Your comment:
 (will show your gravatar)


Copyright © Narendra Tiwari | Powered by: GeeksWithBlogs.net