How to setup CKfinder and CKeditor in Vue

Question

I developing Vue project and I integrated CKeditor with CKfinder successfully but when I click on CKfinder image uploader it's open https://ckeditor.com/apps/ckfinder/3.4.5/core/connector/php/connector.php?command=Init&lang=en

Can I set up a local image upload folder from where I can find or upload images? in Vue here is my code

<template>
   <ckeditor :editor="notesEditor" v-model="form.internal_notes" :config="notesEditorConfig" :class="" @ready="onReady"></ckeditor>
</template>

<script>
   bodyEditor: DecoupledEditor,
        bodyEditorConfig: {
            toolbar: [
                'imageupload', 'ckfinder', '|', 'heading', '|', 'fontFamily', 'fontSize', '|', 'bold',
                'italic',
                'blockQuote', 'imageStyle:full', 'link',
                'alignment', 'numberedList', 'bulletedList', 'insertTable',
                'mergeTableCells', 'undo', 'redo'
            ],
            ckfinder: {
                uploadUrl: '/ckfinder/connector?command=QuickUpload&type=Files&responseType=json',
                filebrowserBrowseUrl: '/ckfinder/browser',
                filebrowserImageBrowseUrl: '/ckfinder/browser?type=Images',
                filebrowserUploadUrl: '/ckfinder/connector?command=QuickUpload&type=Files',
                filebrowserImageUploadUrl: '/ckfinder/connector?command=QuickUpload&type=Images'
            }
        },
        notesEditor: DecoupledEditor,
        notesEditorConfig: {
            toolbar: ['bold', 'italic', '|', 'link']
        }
</script>

Where do I need to mention a local path?

Answer 1

CKfinder image uploader it's open https://ckeditor.com/apps/ckfinder/3.4.5/core/connector/php/connector.php?command=Init&lang=en

I'm not sure what do you mean by that but if you are trying to reference demo CKFinder from ckeditor.com , this won't work. You need to have CKFinder installed locally on your server.

---

Assuming that you have CKFinder installed locally, you need to configure its server-side in ckfinder/config.php file so that it points correct files folder. CKFinder uses Backends and Resource Types for that: https://ckeditor.com/docs/ckfinder/ckfinder3-php/configuration.html#configuration_options_backends https://ckeditor.com/docs/ckfinder/ckfinder3-php/configuration.html#configuration_options_resourceTypes

Backends are storage definitions where two most important configuration settings are root and baseUrl . The root points to files folder location on local file system while baseUrl points to location accessible through HTTP. These are the two settings you need to configure .

Resource Types are root folders for particular types of files. They can be connected with particular Backend (through backend property which matches Backend name) and used to further configure the uploaded files path through directory property.

NOTE: The &type=Images in URL in your CKFinder configuration is the name of the Resource Type into which file should be uploaded. If you decide modify your Resource Type, it may be needed to modify that parameter as well.