1. 컴포넌트 생성
ng generate component write
2. npm라이브러리 다운로드
npm install @toast-ui/editor --save 3. writer.component.ts
- 토스트ui 에디터 임포트해주기
import editor form'@toast-ui/editor';
- 에디터 셋팅
export class PostWriteComponent implements OnInit {
constructor() {}
set() {
let editor = new Editor({
el: document.querySelector('#editor'),
height: '500px',
initialEditType: 'markdown',
previewStyle: 'vertical',
});
}
ngOnInit(): void {
this.set(); //컴포넌트 초기화시 그려주기.
}
}
4. writer.component.html
- cdn으로 토스트ui 에디터용 CSS 임포트해주기.
<head>
. . .
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css"
/>
<!-- Editor's Style -->
<link
rel="stylesheet"
href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css"
/>
. . .
</head>
- 에디터 넣어줄 div만들기.
<body>
<div id="editor"></div>
</body>'Angular.js' 카테고리의 다른 글
| html 을 string 으로 appendChild 해주는 방법! (0) | 2020.07.24 |
|---|---|
| Toast UI Editor 에 color 플러그인 탑재하기 [ Angular.js ] (0) | 2020.07.24 |
| var / let / const 차이점 (0) | 2020.07.16 |
| 변수명 뒤에 물음표(?) 와 달러 ($) 표시 (0) | 2020.07.09 |
| Angular.js Observable (0) | 2020.07.08 |
