summernote.js를 사용해서 게시글 작성하기
| 작성자 | 작성일시 |
|---|---|
| padawanr0k | 2021-07-07 |
- summernote.js는 아주 간단히 적용하고 문서를 작성하듯 쉽게 사용할 수 있는 WYSIWYG Editor입니다.
- 작성한 글을 HTML태그로 export할 수 있고, 저장해 놓은 HTML 태그를 쉽게 import하여 사용할 수도 있습니다.
- 아래와 같은 코드를 DB에 저장하고, 불러와 사용합니다.
<p><strong>1. 왜 중요한가.</strong></p><ul>
<li>지금까지 전해진 활자 가운데 가장 이른 시기의 한글 금속활자가 다수 나왔다. 훈민정음 창제 당시 동국정운식 한자표기도 포함하고 있으며, 활자 크기가 대자(大字), 중자(中字), 소자, 특소자까지 다양.</li>
<li>한문 금속활자 중 일부는 세종 때 만들어진 금속활자 중 가장 완전한 형태로 칭송받는 ‘갑인자(甲寅字)’로 추정. 1434년 만들어진 ‘초주갑인자’일 경우, 가장 이른 시기의 조선 금속활자로 쿠텐베르크(1440년) 이전 금속활자 인쇄본을 가진 우리나라가 확실한 실물 활자까지 갖게 되는 것.</li>
</ul><p><strong>2. 조선 전기 금속활자가 그렇게 희귀한가.</strong></p><ul>
<li>현재 중박 및 규장각 등에 보관된 수십만자의 금속활자는 대부분 17‧18세기 이후 주조된 것들</li>
<li>조선 전기(임진왜란 이전) 금속활자는 중박 소장 을해자 한글활자 뿐이었다. 그런데 이번엔 을해자 한자도 나오고 한글도 훨씬 많이 나왔으며 을유자(1465년) 한자활자도 나옴.</li>
</ul><p><strong>3. 다른 유물은</strong></p><ul>
<li>물시계 부속품으로 추정되는 동제품, 천문시계 부품, 조선시대 화포인 총통(銃筒), 동종(銅鐘) 등 모두 금속 유물</li>
<li>기록으로만 전해온 조선시대 자동 물시계의 주전과 천문시계 실체가 처음 확인되어, 기록으로만 전해져오던 세종 시기 과학기술의 실체를 엿볼 수 있게 됨</li>
</ul><p><strong>4. 왜 이곳에서 발견되었나</strong></p><p>
</p><ul>
<li>금속활자나 다른 유물들이 궁궐, 왕실이 아닌 시전과 중인들인 거주하던 건물에서 출토</li>
<li>모든 유물을 일부러 조각내고 잘라 넣어 사실상 ‘재화 재활용’으로 남긴 것으로 추청</li>
</ul>// routes/vendor.js
router.use('/summernote', express.static(path.join(__dirname, '../node_modules/summernote/dist')));<head>
<script src="/vendors/summernote/summernote-lite.js" defer></script>
<link href="/vendors/summernote/summernote-lite.css" rel="stylesheet">
</head>const createEditor = (selector, editorContent) => {
if ($(selector)) {
const editor = $(selector).summernote();
$(selector).summernote('code', editorContent)
return editor;
} else {
throw '셀렉터를 확인해주세요';
}
}
createEditor('#editor', ''); // editor라는 id를 가진 엘리먼트에 에디터를 생성합니다. 만약 초기값을 주고싶은 경우 두번째 파라미터에 html코드를 전달합니다.const myEditor = createEditor('#editor'); // 글작성후
const content = myEditor.summernote('code'); // 내가 작성한 내용을 HTML문자열로 반환합니다.
// 이후 해당 값을 서버에게 전달합니다.
axios({
method: 'post',
url: `/author/articles/edit/${articleId}`,
data: {
content: escape(content)
},
headers: {
'Content-Type': 'multipart/form-data'
}
}).then((res) => {
if (res.data.result) {
alert('등록되었습니다');
}
}).catch((err) => {
alert('실패하였습니다');
console.error(err);
})-
escape()는 왜 해야하나요? - sql injection을 방지해줍니다.
- 따옴표안에 따옴표가 또 들어가는 경우 문법오류가 발생하는데 해당 오류를 방지해줍니다.