CKEditor CKFinder图片上传-Java 学习之路

我在PHP 5.6上使用CKEditor 4.5.2和CKFinder 3.0.0 . 通常集成工作正常 - 当我单击CKEditor图像按钮时，我可以单击“浏览服务器”按钮并打开CKFinder，我可以选择图像，也可以上传 .

什么不起作用是image2对话框中的“上传”标签 . 我总是收到错误消息“请求的资源类型无效” . 当我点击“发送到服务器”按钮 .

在我的CKFinder配置中，我定义了两种名为 Images 和 Library 的资源类型;除了 Library 是只读的之外，这些基本相同 - 我只想允许上传到 Images 类型 .

有多种方法可以配置CKEditor和CKFinder之间的集成 . 我正在使用CKEditor的自定义JS配置文件，并使用 setupCKEditor 方法将ckFinder连接到它，根据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");

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

我该怎么做？或者，由于CKFinder上传器工作正常，如何在image2对话框中禁用上传选项卡？

更新：这是我目前创建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" } );

和我的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 = '>';
    });
};

1 回答

1
看起来你混合了CKEditor和CKFinder的选项 . CKFinder.setupCKEditor() 的第二个参数是CKFinder配置，而您使用的所有 filebrowser* 选项都属于CKEditor配置 . 请看CKFinder.setupCKEditor() docs . 第三个参数允许您定义上传URL参数，因此您可以在此处将上传内容指向 Images .

请尝试以下代码段：
```
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"});
```
使用 CKFinder.setupCKEditor() 时，将自动设置CKEditor的上载路径，因此不需要显式配置它 .

如果以上内容对您不起作用，请提供创建 ckeditor_1 的代码 .
回复于 2024-04-29T05:20:27+08:00

CKEditor CKFinder图片上传

1 回答

相关问题