Zero부터 시작하는 블로그 제작기
Node.jsExpressQuilljs

글 작성 기능 구현 - 1. Quill.js

글 작성을 위한 페이지가 필요하므로 layout.pug의 block 바로 위에 아래 코드를 작성합니다.

if(session.nickname !== undefined)
  #write
    a(href='/post/write') 글쓰기

그러면 로그인이 된 경우에 오른쪽 navbar에 아래와 같이 글쓰기 버튼이 생깁니다.

이미지

이제 routes 폴더 아래에 post.js 파일을 만들고 app.js에서 route를 추가합니다.

post.js

const express = require('express');
const router = express.Router();

router.get('/write', (req, res) => {
    if (CheckAuth(req, res)) {
        res.render('write', {
            session: req.session,
            title: 'Write',
            categories: req.categories
        });
    }
});

CheckAuth = (req, res) => {
    if (req.session.nickname) {
        return true;
    } else {
        res.render('error', {
            message: '비정상적인 접근입니다.'
        });

        return false;
    }
};

module.exports = router;

이 때 post/write는 누구나 접속 가능한 url이므로 CheckAuth를 통해 실제 로그인 되어있는지 다시 한 번 체크해줍니다.

게시글 작성을 편하게 하기 위해서 웹 기반의 WYSIWYG에디터인 quill을 사용할 것입니다.

views 폴더 아래에 write.pug 파일을 만들어줍니다.

extends layout

block main
  script(src="https://cdn.quilljs.com/1.3.6/quill.js")
  link(href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet")

  .Body
    div
      form(method='post' action='write')
        label(for='category') 메뉴
        select(name="category")
          each category in categories
            option(value=category.name)= category.name
        br
        label(for='title') 제목
        input.input-text(type='text' name='title')
        br

        input(type='hidden' name='body')
        #editor-container
        br
        input(type='submit' value='글쓰기')

  script(src = '/scripts/quill-write.js')

quill을 사용하기 위해서는 별도의 설치 없이 브라우저에서 스크립트를 불러오면 됩니다.

그리고 public/scripts폴더를 만들고 quill-write.js 파일을 생성해 줍니다.

quill-write.js

let quill = new Quill('#editor-container', {
    placeholder: '본문',

    theme: 'snow' // or 'bubble'
});

이유는 알 수 없지만 웹 페이지를 실행하면 아래처럼 툴바 높이가 이상하게 높게 나옵니다.

이미지

style.css 파일에 아래 코드를 추가해줍니다.

.ql-toolbar.ql-snow {
    height: 3em;
}

그럼 아래와 같이 정상적으로 UI가 나타납니다.

이미지