使用 Rails 3 在 Rails Admin 中将 Dragonfly 集成到 CKeditor

Question

目前，我的 Rails Admin 中的 CKeditor 运行良好。

但现在我想启用图片上传，以便用户可以插入自己的图片。 我读到回形针和carrierwave 可以做到这一点，但我在很多事情上都使用dragonfly，所以我不想改变它。

这是我的 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;
}

当我查看“图片”时，我看不到任何上传文件的方式，我什至无法在 Ckeditor (https://github.com/galetahub/ckeditor) 的 Github 页面上得到明确的答案。

重要我使用的是 Rails 3.2.13 版

更新 1：

我在这个页面上阅读http://richonrails.com/articles/getting-started-with-ckeditor

我试过 rails generate ckeditor:install --orm=active_record --backend=dragonfly 仍然没有区别。

Answer 1

我在 StackOverflow 上搜索，这个解决方案对我有用：

Ckeditor in Rails 3

现在我的 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','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']);
            }
        }
    });
}