구글파이어베이스를 사용해 노드js 웹서비스 만들기_5/5

### 지난번 댓글 창 디자인에 입력, 조회, 수정, 삭제 기능을 추가 해보았습니다. (아래)

현재 작업 중인 소스는 아래 깃 허브에 올려 놓았습니다.(단, 서비스계정키 파일은 보안때문에 제외 시켰습니다.)

 -. 표준노드js 웹서비스 코딩 소스 : https://github.com/miniplugin/nodejsboard 

 -. K-PaaS 플랫폼사용해 배포 : https://digitalsolveup.kr/platform.do 

 -. 표준노드js 앱 결과확인 URL : https://nodejsboard.apps.emergency-cloudplatform.kr/ 

오늘은, 게시판 입력 창에 에디터를 붙이는 작업을 해 보았습니다.

- 여러가지 무료 웹 에디터 중 가장 간단하다고 판단된 무료MIT라이센스인 suneditor.js 를 사용하기로 정했습니다.

- 게시물 작성 코드를 보면 왜 간단한지 알 수 있습니다.(아래 딱 3군데만 추가하면 기본으로 사용 가능하다.)

<!-- 무료MIT라이센스 : http://suneditor.com/sample/html/getting-started.html -->
<!-- 아래 3줄이 선에디터 라이브러리를 불러오는 소스 이다. -->
	<link href="https://cdn.jsdelivr.net/npm/suneditor@latest/dist/css/suneditor.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/suneditor@latest/dist/suneditor.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/suneditor@latest/src/lang/ko.js"></script>
중략...
window.onload = function () {
			//아래 3줄이 textArea 태그를 suneditor 로 적용하는 코딩이다.
			const editor = SUNEDITOR.create(document.getElementById('brdmemo'), {
				height: 'auto',
				lang: SUNEDITOR_LANG['ko']
			});
            //중략... 게시물 저장 버튼id이름이 fileNameChange 이다.
            fileNameChange.addEventListener('click', function () {
				editor.save(); // 여기서 웹 에디터의 내용을 임시로 저장하는 함수를 사용한다.

- 아래 게시물 읽기 코드는 위 textArea 태그를 suneditor 로 적용하는 코딩만 일부 추가 된다.(아래)

<div class="form-group">
        <label for="content"> 내용</label>
        <textarea class="form-control" id="content" readonly><%=row.brdmemo%></textarea>
    </div>
중략...
<script>
		const editor = SUNEDITOR.create(document.getElementById('content'), {
			height: 'auto',
			lang: SUNEDITOR_LANG['ko'],
			resizingBar: false // 게시물 읽기 모드라서 하단 크기조절 bar 를 숨긴다.
		});
		editor.toolbar.hide(); // 게시물 읽기 모드라서 툴바를 숨긴다.
		editor.disable(); // 게시물 읽기 모드라서 에디터를 사용 중지 모드로 바꾼다.
	</script>

- 작업 결과 게시글 쓰기 화면(아래)

- 작업 결과 게시글 보기 화면(아래)

 

Ps. 오늘 포스트로 [구글파이어베이스를 사용해 노드js 웹서비스 만들기] 작업을 마칩니다.