Clarification for adding extraPlugin 'uploadimage' in CKEditor4 angular

[bhagyashri-t]

Are you reporting a feature request or a bug?

Documentation request

I am trying to add extraPlugin 'uploadimage' in angular CKEditor4. Though tried to collect all the bits of documentation, not able to get the image upload plugin in the editor. Could you please help in pointing out the missing part in below 'uploadimage' extraPlugin implementation?

app.component.html <ckeditor [(config)]="editorConfig" (ready)="onReady($event)" [data]="model.editorData"></ckeditor> app.component.ts

  public model = {
    editorData : '<p> Hello World! </p>'
  }

 editorConfig = {
   toolbar: [
    [ 'Source', 'specialchar'],
    [ 'Styles', 'Format', 'Font', 'FontSize' ],
    [ 'Bold', 'Italic' ],
    [ 'Undo', 'Redo', 'table'],
    [ 'About', 'uploadimage']
  ],
   extraPlugins: 'uploadimage'
 }

 onReady(event : CKEditor4.EventInfo) {
  console.log("triggerChange :", event.editor);
  event.editor.config.extraPlugins = 'uploadimage';
  event.editor.config.imageUploadUrl = './assets/';
  event.editor.plugins.addExternal('uploadimage', '/./ckeditor/plugins/uploadimage', 'plugin.js')
  event.editor.toolbar.push( [{name: 'uploadimage'}] );
 }

[f1ames]

@bhagyashri-t could you share what exact issues are you facing? Are there any erros in the browser dev console and CKEditor 4 is not loading? Or the plugin is simply missing?

You may also provide a demo (using e.g. https://codesandbox.io/) so when check the live version and see if it can be fix quickly.

[bhagyashri-t]

d you share what exact issues are y

As per the documentation I could found, with above code I should be able to implement extraPlugin 'uploadimage' and be able to upload image by drag and drop. Also I tried to implement other plugins as well, but not able to see icons or functionality for either of them in editor. So, I was asking is there any other configuration needed to add extraPlugin in editor?

I tried to create sandbox with the code shared earlier, but its giving me several errors. Though in my local application its not showing any errors, but also not showing icons for extraPlugins. Even though I am adding it in the toolbar, its not reflecting in the editor. If you can please check below link and let me know if I am missing anything that would be really helpful.

https://codesandbox.io/s/elastic-oskar-1ym10?file=/src/app/app.component.ts

Thanks

[Dumluregn]

A few tips:

1. As mentioned in docs, by default editor uses Standard-all preset, meaning you don't have to add Upload Image as an external plugin. Adding it just using extraPlugins config option is fine.
2. The whole onReady function in your example is unnecessary as it duplicates the already existing changes in config.
3. As you can read on the plugin page and in sample description, uploading the image requires integration with file manager, which doesn't come by default with CKE4. Please read the docs carefully, not just the ones concerning Angular integration, but also the feature you try to implement.

Good luck!

And by the way, please note that our GitHub issue tracker serves for reporting bugs and new features only. Unfortunately, your request is neither of them, therefore please leave your question on Stack Overflow where our team and the community assist other users in solving their issues. If you have CKEditor license, please contact our support team.