viewer 라이브러리는 @toast-ui/editor 에 이미 포함이 되어있다.
따라서 라이브러리 npm 설치는 이전전편을 참고해주길 바란다.
1. 뷰어용 컴포넌트를 만든다.
ng generate component viewer
2. 생성된 viewer.component.ts 에 뷰어라이브러리를 import 한다.
import Viewer from '@toast-ui/editor/dist/toastui-editor-viewer';
3. viewer.component.html 에 뷰어 를 탑재할 div를 생성한다. 또한 viewer 가 사용할 css도 탑재해준다.
<head>
. . .
<link
rel="stylesheet"
href="https://uicdn.toast.com/editor/latest/toastui-editor-viewer.min.css"
/>
. . .
</head>
<body>
. . .
<div id="viewer"></div>
. . .
</body>
4. 이어서 viewer.component.ts 에 viewer를 셋팅한다.
let viewer: Viewer;
@Component({
selector: 'app-viewer',
templateUrl: './viewer.component.html',
styleUrls: ['./viewer.component.css'],
})
export class ViewerComponent implements OnInit {
constructor() {}
set() {
viewer = new Viewer({
el: document.querySelector('#viewer'),
initialValue: `<h1>제목</h1>`,
});
}
ngOnInit(): void {
this.set();
}
}
그렇게되면 화면에 initialValue에 들어있던 값이 Toast 가 의도한대로 예쁘게 출력되는 것을 볼 수 있다.
전편에서 만들어놓은 editor에 글을 작성후 , editor.getHtml() 을 이용해 DB에 HTML 을 DB에 저장할것이다.
그렇다면 우리는 viwer를 이용해 viewer.setHtml() 함수를 이용해서 DB에 저장되어 있던 html들을 출력할수 있지않을까!!
NHN만세
'Angular.js' 카테고리의 다른 글
| 구글 OAuth2로그인 간단한 절차 (0) | 2020.07.30 |
|---|---|
| 구글 OAuth2 로그인 "확인되지 않은 앱 입니다. " 해결방법 !! [angular https ssl통신 설정방법 ] (0) | 2020.07.30 |
| html 을 string 으로 appendChild 해주는 방법! (0) | 2020.07.24 |
| Toast UI Editor 에 color 플러그인 탑재하기 [ Angular.js ] (0) | 2020.07.24 |
| Angular.js에 Toast UI Editor 탑재하기 (1) | 2020.07.23 |
