ruby-on-railsckeditorimage-uploadingdragonfly-gem

Integrate Dragonfly into CKeditor in Rails Admin with Rails 3


I currently have CKeditor working splendid in my Rails Admin.

But now I want to enable image upload so users can insert own images. I read that this is possible with paperclip and carrierwave but I'm using dragonfly for a lot of things so I don't want to change that.

This is my CKeditor config.js:

CKEDITOR.editorConfig = function( config )
{
    config.toolbar_Toolbar =
    [
        { name: 'basicstyles', items : [ 'Bold','Italic','Strike','Underline','-','RemoveFormat'] },
        { name: 'justify', items : [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
        { name: 'styles', items : [ 'Format' ] },       
        { name: 'insert', items : [ 'Image','SpecialChar'] },
        '/',
        { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },        
        { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-'] },
        { name: 'links', items : [ 'Link','Unlink','Anchor', 'Source' ] }
    ];
    config.toolbar = 'Toolbar';
    config.allowedContent = true;
}

When I look to "Image" I don't see any way of uploading a file and I can't get even get a clear answer on the Github Page of the Ckeditor (https://github.com/galetahub/ckeditor).

IMPORTANT I'm using Rails version 3.2.13

UPDATE 1:

I was reading on this page http://richonrails.com/articles/getting-started-with-ckeditor

And I tried rails generate ckeditor:install --orm=active_record --backend=dragonfly still no difference.


Solution

  • I was searching on StackOverflow and this solution worked for me :

    Ckeditor in Rails 3

    Now my config.js looks like this:

    CKEDITOR.editorConfig = function( config )
    {
        config.toolbar_Toolbar =
        [
            { name: 'basicstyles', items : [ 'Bold','Italic','Strike','Underline','-','RemoveFormat'] },
            { name: 'justify', items : [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
            { name: 'styles', items : [ 'Format' ] },       
            { name: 'insert', items : [ 'Image','SpecialChar','Insert','Tools'] },
            '/',
            { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },        
            { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-'] },
            { name: 'links', items : [ 'Link','Unlink','Anchor', 'Source' ] }
        ];
        config.toolbar = 'Toolbar';
        config.allowedContent = true;
    
    
         /* Filebrowser routes */
        // The location of an external file browser, that should be launched when "Browse Server" button is pressed.
        config.filebrowserBrowseUrl = "/ckeditor/attachment_files";
    
        // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Flash dialog.
        config.filebrowserFlashBrowseUrl = "/ckeditor/attachment_files";
    
        // The location of a script that handles file uploads in the Flash dialog.
        config.filebrowserFlashUploadUrl = "/ckeditor/attachment_files";
    
        // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Link tab of Image dialog.
        config.filebrowserImageBrowseLinkUrl = "/ckeditor/pictures";
    
        // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Image dialog.
        config.filebrowserImageBrowseUrl = "/ckeditor/pictures";
    
        // The location of a script that handles file uploads in the Image dialog.
        config.filebrowserImageUploadUrl = "/ckeditor/pictures";
    
        // The location of a script that handles file uploads.
        config.filebrowserUploadUrl = "/ckeditor/attachment_files";
    
        // Rails CSRF token
        config.filebrowserParams = function(){
            var csrf_token, csrf_param, meta,
                metas = document.getElementsByTagName('meta'),
                params = new Object();
    
            for ( var i = 0 ; i < metas.length ; i++ ){
                meta = metas[i];
    
                switch(meta.name) {
                    case "csrf-token":
                        csrf_token = meta.content;
                        break;
                    case "csrf-param":
                        csrf_param = meta.content;
                        break;
                    default:
                        continue;
                }
            }
    
            if (csrf_param !== undefined && csrf_token !== undefined) {
                params[csrf_param] = csrf_token;
            }
    
            return params;
        };
    
        config.addQueryString = function( url, params ){
            var queryString = [];
    
            if ( !params ) {
                return url;
            } else {
                for ( var i in params )
                    queryString.push( i + "=" + encodeURIComponent( params[ i ] ) );
            }
    
            return url + ( ( url.indexOf( "?" ) != -1 ) ? "&" : "?" ) + queryString.join( "&" );
        };
    
        // Integrate Rails CSRF token into file upload dialogs (link, image, attachment and flash)
        CKEDITOR.on( 'dialogDefinition', function( ev ){
            // Take the dialog name and its definition from the event data.
            var dialogName = ev.data.name;
            var dialogDefinition = ev.data.definition;
            var content, upload;
    
            if (CKEDITOR.tools.indexOf(['link', 'image', 'attachment', 'flash'], dialogName) > -1) {
                content = (dialogDefinition.getContents('Upload') || dialogDefinition.getContents('upload'));
                upload = (content == null ? null : content.get('upload'));
    
                if (upload && upload.filebrowser && upload.filebrowser['params'] === undefined) {
                    upload.filebrowser['params'] = config.filebrowserParams();
                    upload.action = config.addQueryString(upload.action, upload.filebrowser['params']);
                }
            }
        });
    }