簡體   English   中英

CKEditor + CKFinder 圖片上傳

[英]CKEditor + CKFinder image uploads

我在 PHP 5.6 上使用 CKEditor 4.5.2 和 CKFinder 3.0.0。 通常集成工作正常 - 當我單擊 CKEditor 圖像按鈕時,我可以單擊“瀏覽服務器”按鈕並打開 CKFinder,我可以選擇圖像,也可以上傳。

不起作用的是 image2 對話框中的“上傳”選項卡。 我總是收到一條錯誤消息“請求的資源類型無效”。 當我單擊“發送到服務器”按鈕時。

在我的 CKFinder 配置中,我定義了兩種資源類型,稱為ImagesLibrary 除了Library是只讀的之外,這些本質上是相同的 - 我只想允許上傳到Images類型。

有多種方式可以配置 CKEditor 和 CKFinder 之間的集成。 我正在為 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");

我已經嘗試在我的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 = '>';
    });
};

看起來你混合了 CKEditor 和 CKFinder 的選項。 CKFinder.setupCKEditor()的第二個參數是 CKFinder 配置,而您使用的所有filebrowser*選項都屬於 CKEditor 配置。 請查看CKFinder.setupCKEditor() 文檔 第三個參數允許您定義上傳 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代碼。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM