Laravel Vue.js integration with CKeditor 4 and CKFinder3 (file manager)

Question

I have some problems with integration CKeditor 4 and CKFinder 3 in My Laravel Vue app.

I just want the functionality when I click on "image button" in my Ckeditor - CKFinder window appears and I'm able to upload all needed images.

What problems I have? (a few, but they must be related with each other):

I have that error in my devtools console: "[CKEDITOR] Error code: cloudservices-no-token-url." (I'm supposing that issue must be resolved when I properly integrate CKeditor with CKFinder)
(as WARN in devtools) - " [CKEDITOR] Error code: editor-plugin-conflict. {plugin: "image", replacedWith: "easyimage"} "
"Image Button" in my CKeditor disappeared (ckeck screenshot below):

You can see my Vue component code with config for ckeditor:

...
 export default {
    components: { VueCkeditor },
    data() {
        return {
            content: '',
            config: {
                toolbar: [
                    { name: 'styles', items : [ 'Styles','Format', 'FontSize' ] },
                    { name: 'clipboard', items : ['Undo','Redo' ] },
                    { name: 'editing', items : [ 'Scayt' ] },
                    { name: 'insert', items : [ 'Image','Table','HorizontalRule','SpecialChar','Iframe' ] },
                    { name: 'tools', items : [ 'Maximize' ] },
                    '/',
                    { name: 'basicstyles', items : [ 'Bold','Italic','Strike','RemoveFormat' ] },
                    { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
                    { name: 'links', items : [ 'Link','Unlink','Anchor' ] },
                ],
                height: 400,
                extraPlugins: 'autogrow,uploadimage',
                filebrowserBrowseUrl: '/filemanager_storage?type=Files',
                filebrowserUploadUrl: '/filemanager_storage/upload?type=Files&_token='+window.Laravel.csrfToken,
            },

        };
    },
...

Other details which may be useful:

I use CKFinder 3 Package for Laravel 5.5+ (https://github.com/ckfinder/ckfinder-laravel-package)
In my ckfinder.php (configurations for CKFinder) I set temporally that code:
```
 $config['authentication'] = function () {
   return true;
 };    
```

I'm not sure in that paths (in my config object in vue):

  filebrowserBrowseUrl: '/filemanager_storage?type=Files',
  filebrowserUploadUrl: '/filemanager_storage/upload?type=Files&_token='+window.Laravel.csrfToken,
    },

*I created 'filemanager_storage' directory in my 'public' directory

Thanks guys a lot for any help!

user_2444889 · Answer

I was facing similar issues regarding a ckeditor4.x integration I did recently in an opencart site with php. While it's not the same environment with vue, maybe this could prove useful to you.

Instead of using the easyimage plugin for managing the image upload , I replaced it with the image2 (enhanced image plugin) . After you've downloaded the image2 plugin and placed it under the ckeditor4/plugins/ directory, make sure to add this in your ckeditor instance:

extraPlugins : 'image2',
removePlugins: 'easyimage,cloudservices'

Regarding the urls in the ckeditor instance, while I'm not using the filebrowserBrowseUrl , I've declared the filebrowserUploadUrl as such :

filebrowserUploadUrl:  '/path_where_ckfinder_is_installed/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json

While in my case it made the image upload possible, I'm still getting the warning [CKEDITOR] Error code: editor-plugin-conflict. {plugin: "image", replacedWith: "image2"} " This is something that I haven't been able to solve yet, but at least the image upload works in my case with no fuss.

Also, make sure in the config.php of ckfinder that you've declared the BaseUrl and root path for the user files directory, i.e

 $config['backends'][] = array(
        'name'         => 'default',
        'adapter'      => 'local',
        'baseUrl'      => $your_file_path,
        'root'         => '/your_root_dir/' . $your_file_path,  // Can be used to explicitly set the CKFinder user files directory.
        'chmodFiles'   => 0777,
        'chmodFolders' => 0755,
        'filesystemEncoding' => 'UTF-8' 
    );

Let me know if this solution suits your case.

Laravel Vue.js integration with CKeditor 4 and CKFinder3 (file manager)

1 Answers