Search code examples
angularckeditorckeditor4.x

How to integrate upload image plugin of CKEditor in Angular Project

I want to add the "Choose file option" inside CKEditor. For that, I am referring to this documentation on Upload image plugin

enter image description here

When clicking on this image icon, the below window opens up

enter image description here

There is no upload image option (choose file option). I want to add this plugin along with CKEditor. Is there any way to add this using npm ?

Or is there any other way I can include this feature in CKEditor 4?

Solution

  • Here sharing same above if someone looking for it.

    1. Set extraPlugins: 'uploadimage' config options.
    2. Set up through the config.filebrowserBrowseUrl and config.filebrowserUploadUrl configuration settings.
    3. Setup ckfinder as per Documentation

    Here is sample demo

    Main part is

    this.ckeConfig = {
      extraPlugins: 'uploadimage',
      uploadUrl:      'https://ckeditor.com/apps/ckfinder/3.4.5/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json',

      // Configure your file manager integration. This example uses CKFinder 3 for PHP.
      filebrowserBrowseUrl:'https://ckeditor.com/apps/ckfinder/3.4.5/ckfinder.html',
      filebrowserImageBrowseUrl:'https://ckeditor.com/apps/ckfinder/3.4.5/ckfinder.html?type=Images',
      filebrowserUploadUrl:'https://ckeditor.com/apps/ckfinder/3.4.5/core/connector/php/connector.php?command=QuickUpload&type=Files',
      filebrowserImageUploadUrl:'https://ckeditor.com/apps/ckfinder/3.4.5/core/connector/php/connector.php?command=QuickUpload&type=Images'
    };