Ckeditor5: upload adapter example

[vespino]

I implemented ckeditor in my project and would also like to include image uploads. Is there an example for creating an upload adapter? This is the error I'm currently getting when trying to drag-and-drop an image:

filerepository-no-adapter: Upload adapter is not defined. Read more: https://docs.ckeditor.com/ckeditor5/latest/framework/guides/support/error-codes.html#error-filerepository-no-upload-adapter

One more thing: when selecting a text and setting it to "heading 1", H2 tags are added where I would expect H1. Is this a bug?

This is the code I'm currently using:

<script src="https://cdn.ckeditor.com/ckeditor5/1.0.0-alpha.2/inline/ckeditor.js"></script>

<script>
InlineEditor
    .create( document.querySelector( '#editor' ), {
        image: {
            // You need to configure the image toolbar too, so it uses the new style buttons.
            toolbar: [ 'imageTextAlternative', '|', 'imageStyleAlignLeft', 'imageStyleFull', 'imageStyleAlignRight' ],

            styles: [
                // This option is equal to a situation where no style is applied.
                'imageStyleFull',

                // This represents an image aligned to left.
                'imageStyleAlignLeft',

                // This represents an image aligned to right.
                'imageStyleAlignRight'
            ]
        }
    } )
    .catch( error => {
        console.error( error );
    } );
</script>

[davidpolberger]

The heading issue you mention is by design. Refer to https://github.com/ckeditor/ckeditor5-heading/issues/72 for more information.

[vespino]

@davidpolberger thanks, that works. Any thoughts on the image upload thing?

[davidpolberger]

Not yet, @vespino. We're writing the server infrastructure for image uploads as I write this, but we aren't scheduled to write the corresponding image upload adapter for CKEditor 5 until January.

[Reinmar]

As for the upload adapter thing, we don't have it covered properly in the docs (I reported https://github.com/ckeditor/ckeditor5/issues/709 to track that). However, https://github.com/ckeditor/ckeditor5-adapter-ckfinder/blob/master/src/uploadadapter.js implements a simple adapter and I think the code should be easy to customize for other backend services.

[Reinmar]

I think that all the questions mentioned in this topic were answered (thanks, @davidpolberger!), so I'm closing this ticket.

[vespino]

One more question. Adding the upload URL is handled in the file:

ClassicEditor
  .create( editorElement, {
    ckfinder: {
      uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json'
    }
  } )
  .then( ... )
  .catch( ... );

But could I trouble you to tell me where I should put this file and will this also enable drag-and-drop automatically like in this example?