Simple TinyMCE File/Image Browser

[cnelissen]

As a part of the file manager that I posted earlier (http://extjs.com/forum/showthread.php?t=38018), I thought it might be helpful to post an example of how to use the included file and image choosers to create custom file/image browsers for TinyMCE.

First create the actual extension:

FileBrowser.js

function FileBrowser (field_name, url, type, win) {
    if (type == 'file') {
        var chooser = new FileChooser({
            width: 515,
            height: 400
        });
        
        chooser.show(field_name, function(el, data) {
            // insert information now
            win.document.getElementById(el).value = data;
        });
    } else if (type == 'image') {
        var chooser = new ImageChooser({
            width: 515,
            height: 400
        });
        
        chooser.show(field_name, function(el, data) {
            // insert information now
            win.document.getElementById(el).value = data;
            
            // for image browsers: update image dimensions
            if (win.ImageDialog.getImageData) win.ImageDialog.getImageData();
            if (win.ImageDialog.showPreviewImage) win.ImageDialog.showPreviewImage(data);
        });
    }
    
    return false;
} 

Now in your script tags, make sure to include the choosers, along with the new FileBrowser extension:

<script language="javascript" type="text/javascript" src="/path/to/tiny_mce.js"></script>
<script language="javascript" type="text/javascript" src="FileBrowser.js"></script>
<script language="javascript" type="text/javascript" src="FileChooser.js"></script>
<script language="javascript" type="text/javascript" src="ImageChooser.js"></script>

Lastly in your TinyMCE config, make sure to set the callback function for FileBrowser:

tinyMCE.init({
     theme: 'advanced',
     ....more config options....,
     file_browser_callback : 'FileBrowser'
});

As with my previous post, if anyone has any suggestions please let me know!

I have attached some screenshots of the choosers in action.

[vlados]

Can we see some demo or screenshot?

[supawat]

Are you work with full screen mode of tinymce?

I not work with full screen mode.

How to work with full screen mode ?

[CINUE]

I use the extension with Ext.ux.TinyMCE and i have a problem when open the image chooser at second time, it don't close and don't select the image.

[CINUE]

I solved the problem:

ImageChooser.js

doCallback: function() {
		var selectedNode = this.view.getSelectedNodes()[0];
		var lookup = this.lookup;
		var callback = this.callback;
		var el = this.el;
		
		this.popup.close();	//this solve the problem	

		//this.popup.hide(this.showEl, function() {
			if (selectedNode && callback) {
				var data = lookup[selectedNode.id].web_path;
				callback(el, data);

			}
		//});
	}
};

FileChooser.js

doCallback : function() {
		var row = this.grid.getSelectionModel().getSelected();
		var callback = this.callback;
		var el = this.el;
		
		this.popup.close();  //this solve the problem
		//this.popup.hide(this.showEl, function() {
			if (row && callback) {
				var data = row.data.web_path;
				callback(el, data);
			}
		//});
	}

[japerr]

When opening the file/image chooser window, it works the first time. On the second go around it does not close or select the file/image. The previous post by CINUE did not solve the issue.

[asagala]

Anyone resolved the above issue?

[asagala]

If you remove the id from the window it solves the issue. Just make sure to add the same id on the dataview element so you keep the css styles working (image thumbnail size etc..)

[__RaD0__]

Will this Simple TinyMCE File/Image browser also work in a Ruby on Rails application ?