You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何简化CKEditor上传功能?仅保留本地图片浏览上传能力

Got it, let's simplify that CKEditor image upload experience so you only have the local file browse & upload functionality you need. Here's how to tweak your setup step by step:

1. Trim Down the Image Dialog (Remove Extra Tabs/Fields)

The biggest fix is hiding all the unnecessary tabs in the image upload dialog. You had this line commented out in your config.js—uncomment and adjust it to strip away the advanced and link sections:

CKEDITOR.editorConfig = function( config ) {
    // Keep your existing upload endpoint
    config.filebrowserUploadUrl = '/uploader/upload.php';

    // Critical: Remove the advanced and link tabs from the image dialog
    config.removeDialogTabs = 'image:advanced;image:Link';

    // Your existing toolbar setup is already minimal (good job!)
    config.toolbar = [
        { name: 'insert', items: ['Smiley'] },
        { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline' ] },
        { name: 'links', items: [ 'Image' ] }
    ];

    // Keep all your other existing configuration as-is
    config.autoParagraph = false;
    config.allowedContent = true;
    config.fullPage = false;
    config.extraAllowedContent = 'p(*)[*]{*};span(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
    config.extraPlugins = 'youtube,ckawesome';
    config.fontawesomePath = 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css';
    config.contentsCss = ['https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css','https://app.gratiswebshopbeginnen.nl/assets/bootstrap/css/bootstrap.min.css'];
    config.format_tags = 'p;h1;h2;h3;pre';
};

2. Simplify the CKEditor Initialization (Optional but Clean)

Your current init code includes filebrowserBrowseUrl, which points to a server file browser. If you don't need to pick existing files from your server, remove that line so the image dialog defaults straight to the upload tab:

CKEDITOR.replace( 'editor1', {
    customConfig: '/assets/plugins/ckeditor/config.js',
    enterMode : CKEDITOR.ENTER_BR
});

3. Make Sure Your Backend Works Correctly

Don't forget: your /uploader/upload.php needs to return the exact JSON format CKEditor expects after processing the upload:

  • On success:
    {
        "uploaded": 1,
        "fileName": "my-image.jpg",
        "url": "/uploads/my-image.jpg"
    }
    
  • On failure:
    {
        "uploaded": 0,
        "error": {
            "message": "Upload failed. Please try again."
        }
    }
    

After these changes, when you click the Image button in CKEditor, you'll only see the upload section (with a "Browse" button to select local files) and basic image settings (like width/height)—no extra fields to fill out.

内容的提问来源于stack exchange,提问作者howthedog

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.28 09:27:50