How to integrate upload image plugin of CKEditor in Angular Project

user_10348758 0
Viewed 2107

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?

ckeditor4.x angular ckeditor
1 Answers

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'
    };
user_22475410
Related