CODEWITHSUNDEEP
angular6
Mishty
Mishty

Reputation: 43

How to upload Image from desktop in CKEditor in Angular 6

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?

Upvotes: 2

Views: 1892

Answers (1)

Avinash Singh
Avinash Singh

Reputation: 5396

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.

Upvotes: 1

Related Questions