CKEditor + CKFinder image uploads

Question

I'm using CKEditor 4.5.2 with CKFinder 3.0.0 on PHP 5.6. Generally the integration works fine - when I click the CKEditor image button, I can click the "Browse server" button and CKFinder opens, I can select images, and also do uploads.

What doesn't work is the 'Upload' tab in the image2 dialogue. I always get an error saying "The requested resource type is not valid." when I click the "Send to server" button.

In my CKFinder config I have two resource types defined called Images and Library ; these are essentialy the same except that Library is read-only - I only want to allow uploads to the Images type.

There are multiple ways of configuring the integration between CKEditor and CKFinder. I am using a custom JS config file for CKEditor and connecting ckFinder to it using the setupCKEditor method, as per the docs :

CKFinder.setupCKEditor(ckeditor_1, {
    'height': '100%',
    'jquery': '/js/jquery-1.11.3.min.js',
    'skin': 'jquery-mobile',
    'swatch': 'a',
    'themeCSS': '/themes/mytheme.min.css',
    'filebrowserBrowseUrl': '/ckfinder/ckfinder.html',
    'filebrowserImageBrowseUrl': '/ckfinder/ckfinder.html?Type=Images',
    'filebrowserImageUploadUrl':  '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images'
}, "Images");

I've tried passing the same values to CKEditor in my CKEDITOR.replace call, and also set them on the config property in my external config file, yet nothing changes - I still get the same error.

How should I do this? Alternatively, since the CKFinder uploader works fine, how can I disable the upload tab in the image2 dialogue?

Update: here's my current code for creating CKEditor and CKFinder instances:

var ckeditor_1 = CKEDITOR.replace('html', {
    "baseHref":"http://mysite.mac.local/",
    "toolbarStartupExpanded":true,
    "extraPlugins":"symbol",
    "customConfig":"/js/ckconfig.js"
});
CKFinder.setupCKEditor( ckeditor_1, {
    'height': '100%',
    'jquery': '/js/jquery-1.11.3.min.js',
    'skin': 'jquery-mobile',
    'swatch': 'a',
    'themeCSS': '/themes/mytheme.min.css'
}, { type: "Images" } );

And my CKEditor config file:

CKEDITOR.editorConfig = function (config) {

    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    config.docType = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">';
    config.toolbarGroups = [
        {name: 'document', groups: ['mode', 'document', 'doctools']},
        {name: 'clipboard', groups: ['clipboard', 'undo']},
        {name: 'editing', groups: ['find', 'selection', 'spellchecker']},
        {name: 'links'},
        {name: 'insert'},
        {name: 'tools'},
        {name: 'others'},
        '/',
        {name: 'basicstyles', groups: ['basicstyles', 'cleanup']},
        {name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align']},
        {name: 'styles'},
        {name: 'colors'},
        {name: 'about'},
        {name: 'symbol'}
    ];
    config.removePlugins = 'templates,save,specialchar,image,flash,scayt,forms,wsc,print,iframe,pagebreak';
    CKEDITOR.plugins.addExternal('symbol', '/ckeditorplugins/symbol/', 'plugin.js');
    config.extraPlugins = 'symbol';
    config.templates_replaceContent = false;
    config.templates_files = [
        '/ckeditorplugins/templates/templates.js'
    ];
    config.allowedContent = true;
    config.toolbarCanCollapse = true;
    config.fullPage = true;
    config.skin = 'bootstrapck';
    config.height = 400;
    config.uiColor = '#f9dda0';
    config.autoParagraph = false;
    config.enterMode = CKEDITOR.ENTER_BR;
    CKEDITOR.on('instanceReady', function (ev) {
        ev.editor.dataProcessor.writer.selfClosingEnd = '>';
    });
};

Answer 1

It looks like you mixed options for CKEditor and CKFinder. The second argument of CKFinder.setupCKEditor() is CKFinder configuration, while all filebrowser* options that you used belong to CKEditor configuration. Please have a look at CKFinder.setupCKEditor() docs . The third argument allows you to define upload URL parameters, so here you can point uploads to Images .

Please try following snippet:

CKFinder.setupCKEditor(ckeditor_1, {
    'height': '100%',
    'jquery': '/js/jquery-1.11.3.min.js',
    'skin': 'jquery-mobile',
    'swatch': 'a',
    'themeCSS': '/themes/mytheme.min.css'
}, {type: "Images"});

When using CKFinder.setupCKEditor() the upload path for CKEditor will be set automatically, so there should be no need to configure it explicitly.

If the above doesn't work for you, please provide also code that creates ckeditor_1 .

CKEditor + CKFinder image uploads

Question

1 answers

solution1
2 ACCPTED 2015-09-17 06:49:39

CKEditor + CKFinder image uploads

Question

1 answers

solution1 2 ACCPTED 2015-09-17 06:49:39

solution1
2 ACCPTED 2015-09-17 06:49:39