ToastUI Image Editor How To - NPM/Angular/Typescript/SCSS

howto.md

I was able to get ToastUI Image Editor working including styles and icons using npm. In a couple of steps here is how I did it within an Angular app using npm, typescript, scss, etc.

This was done using tui-image-editor 3.7.2 in an angular 6 project.

1. Run

npm install --save tui-image-editor

2. In tsconfig.json

{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

3. In {root project}/src/styles.scss

@import '~tui-image-editor/dist/tui-image-editor.min.css';

4. Create tui-image-editor-wrapper.ts

import { Component, ViewChild, ElementRef, OnInit } from "@angular/core";
// @ts-ignore
import ImageEditor from 'tui-image-editor';

@Component({
	selector: 'tui-image-editor-wrapper',
	templateUrl: 'tui-image-editor-wrapper.component.html',
	styleUrls: ['./tui-image-editor-wrapper.component.scss']
})
export class TUIImageEditorWrapper implements OnInit {
    @ViewChild('container') container: ElementRef;

    ngOnInit() {
        new ImageEditor(this.container.nativeElement, {
            includeUI: {
                theme: {
                    'menu.normalIcon.path': './assets/images/svg/icon-d.svg',
                    'menu.activeIcon.path': './assets/images/svg/icon-b.svg',
                    // @ts-ignore
                    'menu.disabledIcon.path': './assets/images/svg/icon-a.svg',
                    'menu.hoverIcon.path': './assets/images/svg/icon-c.svg',
                    'submenu.normalIcon.path': './assets/images/svg/icon-d.svg',
                    'submenu.activeIcon.path': './assets/images/svg/icon-c.svg',
                }
            }
        });

    }
}

5. Create tui-image-editor-wrapper.component.html

<div #container></div>

6. Copy icon svg files from node_modules/tui-image-editor/dist/svg/* to assets/images/svg/* (or wherever you want the static files to be hosted and served)

7. Use as you would any other component

<tui-image-editor-wrapper></tui-image-editor-wrapper>

More Info:

nhn/tui.image-editor#279

nhn/tui.image-editor#80

nhn/tui.image-editor#209

nhn/tui.image-editor#230

https://github.com/nhn/tui.image-editor

https://ui.toast.com/tui-image-editor/

My recommendation to ToastUI is to add better typescript integration; Add 'menu.disabledIcon.path' and 'menu.hoverIcon.path' in particular. Also figure out a better way to reference the icon svgs when using the NPM package. A nice to have would be an official Angular component (similar to the Vue and React components that already exist). This is a really great project and overall very well done.