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 oracle集群安装出bug
  • ¥15 关于#python#的问题:自动化测试
  • ¥20 问题请教!vue项目关于Nginx配置nonce安全策略的问题
  • ¥15 教务系统账号被盗号如何追溯设备
  • ¥20 delta降尺度方法,未来数据怎么降尺度
  • ¥15 c# 使用NPOI快速将datatable数据导入excel中指定sheet,要求快速高效
  • ¥15 再不同版本的系统上,TCP传输速度不一致
  • ¥15 高德地图2.0 版本点聚合中Marker的位置无法实时更新,如何解决呢?
  • ¥15 DIFY API Endpoint 问题。
  • ¥20 sub地址DHCP问题