【问题标题】:CKEditor + CKFinder image uploadsCKEditor + CKFinder 图片上传
【发布时间】:2015-09-16 12:12:49
【问题描述】:

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

无法使用的是 image2 对话框中的“上传”标签。我总是收到一条错误消息,提示“请求的资源类型无效”。当我点击“发送到服务器”按钮时。

在我的 CKFinder 配置中,我定义了两种资源类型,称为 ImagesLibrary;除了 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 = '>';
    });
};

【问题讨论】:

  • 您是否有机会联系我们cksource.com/contact 并提供对您网站的访问(通过浏览器),以便我们检查 HTML 源代码和 HTTP 请求?
  • 谢谢,我已经在网站上为您安排好了,并向您发送了包含详细信息的联系表。

标签: javascript php ckeditor ckfinder


【解决方案1】:

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

请尝试以下 sn-p:

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 的代码。

【讨论】:

  • 这没有帮助 - 我仍然得到同样的错误。我已经发布了我的 CKEditor 设置代码。
  • 能否请您发布为CKEditor定义的"customConfig":"/js/ckconfig.js"的内容?
  • 我已经添加了配置文件
  • 我在我的开发和登台服务器上尝试过这个,但是当我在我的实时服务器上这样做时,它成功了!不知道发生了什么误会 - 可能是操作员错误 :) 感谢您的帮助。
  • 我很高兴它终于成功了 :) 这也可能是一些与缓存相关的问题。
猜你喜欢
  • 1970-01-01
  • 2013-07-07
  • 1970-01-01
  • 2010-11-30
  • 2016-02-23
  • 1970-01-01
  • 2019-07-16
  • 2020-06-07
  • 2013-06-05
相关资源
最近更新 更多