Angualr - SummerNote 적용
2022. 6. 27. 13:14ㆍAngular
반응형
썸머노트
텍스트 에디터 라이브러리,
Summernote - Super Simple WYSIWYG editor
글쓰기
<head>
<meta charset="utf-8" />
<title>SummerNoteTest</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<!-- include libraries(jQuery, bootstrap) -->
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
rel="stylesheet"
/>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- include summernote css/js -->
<link
href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
</head>index.html의 head 태그 위와같이 변경
<textarea type="text" id="summernote"> </textarea>사용 할 위치에 텍스트 에이리어 아이디
id="summernote"
로 설정.
<script>
$(document).ready(function () {
$("#summernote").summernote({
height: 800, // 높이 px
width: 800, // 넓이 px
});
});
</script>index.html 의 body 아래에 스크립트 추가
글 읽기
<textarea #ins type="text" id="summernote"> </textarea>
<button (click)="submit()">submit</button>
<div *ngIf="onclick" [innerHTML]="data"></div>.html
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
@Component({
selector: 'app-summernote',
templateUrl: './summernote.component.html',
styleUrls: ['./summernote.component.css'],
})
export class SummernoteComponent implements OnInit {
@ViewChild('ins') ins!: ElementRef;
data: any;
onclick = false;
constructor() {}
ngOnInit(): void {}
submit() {
this.onclick = false;
this.onclick = true;
this.data = this.ins.nativeElement.value;
}
}.ts
