How to upload Image from desktop in CKEditor in Angular 6 - angular6

Question

I have tried lots of things but I could not find any solution for that, How can I upload an image from the desktop in CK Editor in Angular 6. How can I configure that?

Answer 1

You need to write some code to insert images or links to images from your server path.
Try that:
<ckbutton [name]="'imageExplorer'"
[command]="'openImageExplorer'"
(click)="openImageExplorer($event)"
[icon]="'./images/Icon.png'"
[label]="'Open image explorer'"
[toolbar]="'insert,1'">
</ckbutton>
Config File:
this.ckeConfig = {
height: 400,
language: "en",
allowedContent: true,
toolbar: [
{ name: "clipboard", items: ["Cut", "Copy", "Paste", "PasteText", "PasteFromWord", "-", "Undo", "Redo"] },
{ name: "links", items: ["Link", "Unlink", "Anchor"] },
{ name: "insert", items: ["Image", "Table", "HorizontalRule", "SpecialChar", "Iframe", "imageExplorer"] }
]
};
In your dialog window insert the link:
onAddImage() {
try
{
let link = this.ckeditor.instance.document.createElement("img");
link.setAttribute("alt", "Image");
link.setAttribute("src", "./Images/test.png");
this.ckeditor.instance.insertElement(link);
}
catch(error)
{
console.log((<Error>error).message);
}
this.showFiles = false;
}
For Documentation
Hope it helps thanks.