在带有 CKEditor gem、回形针导轨 4 的 UI 中没有图像上传功能



我正在使用 ckeditor gem (https://github.com/galetahub/ckeditor) 和回形针 gem,CKEditor 可以工作,但是当我单击图像按钮时,我没有上传图像的选项,只能输入一个 URL。 我找不到任何文档来解释如何使用回形针 Rails 4 执行此操作。

有一个问题描述了问题:

一种解决方案是从那里复制配置的内容.js。

只需修改配置。 解决方案从@KrauseFx

    /*
     Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
     For licensing, see LICENSE.html or http://ckeditor.com/license
     */
    CKEDITOR.editorConfig = function( config )
    {
        // Define changes to default configuration here. For example:
        // config.language = 'fr';
        // config.uiColor = '#AADC6E';
        /* 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";
        config.allowedContent = true;
        // 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']);
                }
            }
        });
        // Toolbar groups configuration.
        config.toolbar = [
            { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source'] },
            { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
            // { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
            // { name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
            { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
            { name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar' ] },
            { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
            '/',
            { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
            { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
            { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] }
        ];
        config.toolbar_mini = [
            { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
            { name: 'styles', items: [ 'Font', 'FontSize' ] },
            { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
            { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
            { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] }
        ];
    };

我也尝试使用 ckeditor 进行图像上传,但我实际上切换到了基于 CKEditor 构建的富编辑器,但可以更好地处理图像上传。我正在将它与Carrierwave和Rails 4一起使用,但rich也与回形针兼容(它实际上后来添加了Carrierwave支持)。

您可以尝试ckeditor-imgur宝石,它会将您的图像保存到 imgur 中,以便免费轻松地上传您的图像。

https://github.com/yfxie/ckeditor-imgur

最新更新