ckeditor / ckeditor5

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.
https://ckeditor.com/ckeditor-5
Other
8.27k stars 3.59k forks source link

Simple Upload Adapter, ckeditor5 can't upload file #16271

Closed jsplay closed 2 weeks ago

jsplay commented 3 weeks ago

Build: 8p3cild9cwql-nohdljl880ze

I used CKeditor5 online build tool and included SimpleUploadAdapter. Here is the source of ckeditor.js:

`/**

import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';

import { Autoformat } from '@ckeditor/ckeditor5-autoformat'; import { Bold, Code, Italic } from '@ckeditor/ckeditor5-basic-styles'; import { BlockQuote } from '@ckeditor/ckeditor5-block-quote'; import { CodeBlock } from '@ckeditor/ckeditor5-code-block'; import type { EditorConfig } from '@ckeditor/ckeditor5-core'; import { Essentials } from '@ckeditor/ckeditor5-essentials'; import { FontColor, FontFamily, FontSize } from '@ckeditor/ckeditor5-font'; import { Heading } from '@ckeditor/ckeditor5-heading'; import { AutoImage, Image, ImageCaption, ImageInsert, ImageResize, ImageStyle, ImageToolbar, ImageUpload } from '@ckeditor/ckeditor5-image'; import { Indent } from '@ckeditor/ckeditor5-indent'; import { Link, LinkImage } from '@ckeditor/ckeditor5-link'; import { List } from '@ckeditor/ckeditor5-list'; import { MediaEmbed } from '@ckeditor/ckeditor5-media-embed'; import { Paragraph } from '@ckeditor/ckeditor5-paragraph'; import { PasteFromOffice } from '@ckeditor/ckeditor5-paste-from-office'; import { SourceEditing } from '@ckeditor/ckeditor5-source-editing'; import { Table, TableToolbar } from '@ckeditor/ckeditor5-table'; import { Undo } from '@ckeditor/ckeditor5-undo'; import { SimpleUploadAdapter } from '@ckeditor/ckeditor5-upload';

// You can read more about extending the build with additional plugins in the "Installing plugins" guide. // See https://ckeditor.com/docs/ckeditor5/latest/installation/plugins/installing-plugins.html for details.

class Editor extends ClassicEditor { public static override builtinPlugins = [ AutoImage, Autoformat, BlockQuote, Bold, Code, CodeBlock, Essentials, FontColor, FontFamily, FontSize, Heading, Image, ImageCaption, ImageInsert, ImageResize, ImageStyle, ImageToolbar, ImageUpload, Indent, Italic, Link, LinkImage, List, MediaEmbed, Paragraph, PasteFromOffice, SimpleUploadAdapter, SourceEditing, Table, TableToolbar, Undo ];

public static override defaultConfig: EditorConfig = {
    toolbar: {
        items: [
            'heading',
            '|',
            'bold',
            'italic',
            'link',
            'bulletedList',
            'numberedList',
            '|',
            'outdent',
            'indent',
            '|',
            'imageUpload',
            'blockQuote',
            'insertTable',
            'mediaEmbed',
            'undo',
            'redo'
        ]
    },
    language: 'en',
    image: {
        toolbar: [
            'imageTextAlternative',
            'toggleImageCaption',
            'imageStyle:inline',
            'imageStyle:block',
            'imageStyle:side',
            'linkImage'
        ]
    },
    table: {
        contentToolbar: [
            'tableColumn',
            'tableRow',
            'mergeTableCells'
        ]
    }
};

}

export default Editor;`

And I am using it in html, here is the code:

``

But when I try to upload the image, the browser gives me an error "Can't upload filename". No errors in the console.log whatsoever, but the Apache's access.log gives these strange two lines:

127.0.0.1 - - [23/Apr/2024:08:52:53 +0300] "POST /abc/upload HTTP/1.1" 301 239 127.0.0.1 - - [23/Apr/2024:08:52:53 +0300] "GET /abc/upload/ HTTP/1.1" 200 696

I set upload directory permission to 777. What could be the problem here?

Thanks!

jsplay commented 3 weeks ago

Can be deleted.