CKEditor + CKFinder 图片上传

Question

I'm using CKEditor 4.5.2 with CKFinder 3.0.0 on PHP 5.6.我在 PHP 5.6 上使用 CKEditor 4.5.2 和 CKFinder 3.0.0。 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.通常集成工作正常 - 当我单击 CKEditor 图像按钮时，我可以单击“浏览服务器”按钮并打开 CKFinder，我可以选择图像，也可以上传。

What doesn't work is the 'Upload' tab in the image2 dialogue.不起作用的是 image2 对话框中的“上传”选项卡。 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 ;在我的 CKFinder 配置中，我定义了两种资源类型，称为Images和Library ； these are essentialy the same except that Library is read-only - I only want to allow uploads to the Images type.除了Library是只读的之外，这些本质上是相同的 - 我只想允许上传到Images类型。

There are multiple ways of configuring the integration between CKEditor and CKFinder.有多种方式可以配置 CKEditor 和 CKFinder 之间的集成。 I am using a custom JS config file for CKEditor and connecting ckFinder to it using the setupCKEditor method, as per the docs :我正在为 CKEditor 使用自定义 JS 配置文件，并根据文档使用setupCKEditor方法将setupCKEditor连接到它：

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.我已经尝试在我的CKEDITOR.replace调用中将相同的值传递给 CKEditor，并将它们设置在我的外部配置文件的config属性上，但没有任何变化 - 我仍然遇到相同的错误。

How should I do this?我该怎么做？ Alternatively, since the CKFinder uploader works fine, how can I disable the upload tab in the image2 dialogue?或者，由于 CKFinder 上传器工作正常，我如何禁用 image2 对话框中的上传选项卡？

Update: here's my current code for creating CKEditor and CKFinder instances:更新：这是我当前用于创建 CKEditor 和 CKFinder 实例的代码：

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 配置文件：

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.看起来你混合了 CKEditor 和 CKFinder 的选项。 The second argument of CKFinder.setupCKEditor() is CKFinder configuration, while all filebrowser* options that you used belong to CKEditor configuration. CKFinder.setupCKEditor()的第二个参数是 CKFinder 配置，而您使用的所有filebrowser*选项都属于 CKEditor 配置。 Please have a look at CKFinder.setupCKEditor() docs .请查看CKFinder.setupCKEditor() 文档。 The third argument allows you to define upload URL parameters, so here you can point uploads to Images .第三个参数允许您定义上传 URL 参数，因此您可以在此处将上传指向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.使用CKFinder.setupCKEditor() ，CKEditor 的上传路径将自动设置，因此无需明确配置。

If the above doesn't work for you, please provide also code that creates ckeditor_1 .如果上述方法对您不起作用，请同时提供创建ckeditor_1代码。

CKEditor + CKFinder 图片上传

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-09-17 06:49:39

CKEditor + CKFinder 图片上传

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-09-17 06:49:39

解决方案1
2 已采纳 2015-09-17 06:49:39