dsk61780 2015-09-16 12:12
浏览 65
已采纳

CKEditor + CKFinder图片上传

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 = '>';
    });
};
  • 写回答

1条回答 默认 最新

  • doudaochu1699 2015-09-17 06:49
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位,为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后,界面没有,cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 保护模式-系统加载-段寄存器