1. #1
    Ext JS Premium Member cnelissen's Avatar
    Join Date
    Sep 2007
    Location
    California
    Posts
    225
    Vote Rating
    8
    cnelissen will become famous soon enough

      0  

    Default Simple TinyMCE File/Image Browser

    Simple TinyMCE File/Image Browser


    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
    PHP Code:
    function FileBrowser (field_nameurltypewin) {
        if (
    type == 'file') {
            var 
    chooser = new FileChooser({
                
    width515,
                
    height400
            
    });
            
            
    chooser.show(field_name, function(eldata) {
                
    // insert information now
                
    win.document.getElementById(el).value data;
            });
        } else if (
    type == 'image') {
            var 
    chooser = new ImageChooser({
                
    width515,
                
    height400
            
    });
            
            
    chooser.show(field_name, function(eldata) {
                
    // insert information now
                
    win.document.getElementById(el).value data;
                
                
    // for image browsers: update image dimensions
                
    if (win.ImageDialog.getImageDatawin.ImageDialog.getImageData();
                if (
    win.ImageDialog.showPreviewImagewin.ImageDialog.showPreviewImage(data);
            });
        }
        
        return 
    false;

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

    Code:
    <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:

    Code:
    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.
    Attached Images
    - Clint Nelissen

  2. #2
    Ext User
    Join Date
    Aug 2007
    Posts
    72
    Vote Rating
    0
    vlados is on a distinguished road

      0  

    Default


    Can we see some demo or screenshot?

  3. #3
    Ext User
    Join Date
    Nov 2007
    Posts
    2
    Vote Rating
    0
    supawat is on a distinguished road

      0  

    Default I not work with full screen mode

    I not work with full screen mode


    Are you work with full screen mode of tinymce?

    I not work with full screen mode.

    How to work with full screen mode ?

  4. #4
    Ext User
    Join Date
    Jun 2007
    Posts
    10
    Vote Rating
    0
    CINUE is on a distinguished road

      0  

    Default Problem

    Problem


    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.

  5. #5
    Ext User
    Join Date
    Jun 2007
    Posts
    10
    Vote Rating
    0
    CINUE is on a distinguished road

      0  

    Thumbs up Fix'it

    Fix'it


    I solved the problem:

    ImageChooser.js
    Code:
    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

    Code:
    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);
    			}
    		//});
    	}

  6. #6
    Ext User
    Join Date
    Aug 2008
    Posts
    1
    Vote Rating
    0
    japerr is on a distinguished road

      0  

    Default Chooser window not working second time

    Chooser window not working second time


    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.

  7. #7
    Sencha User
    Join Date
    Sep 2009
    Posts
    112
    Vote Rating
    0
    asagala is on a distinguished road

      0  

    Default


    Anyone resolved the above issue?

  8. #8
    Sencha User
    Join Date
    Sep 2009
    Posts
    112
    Vote Rating
    0
    asagala is on a distinguished road

      0  

    Default


    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..)

  9. #9
    Sencha User
    Join Date
    Feb 2013
    Posts
    1
    Vote Rating
    0
    __RaD0__ is on a distinguished road

      0  

    Default Ruby on Rails

    Ruby on Rails


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