[Summernote] Vue.js 프로젝트에 Summernote 에디터 적용하기

---

개요

 

현재 Vue.js로 작업중인 프로젝트에서 위지위그 에디터를 적용해야되는 이슈가 있었습니다.

적절한 오픈소스를 찾아보다 Summernote에 대해 알게 되어 적용하게 되었고, 해당 작업중 겪었던 어려운 점과 해결법 등을 포스팅 해보려 합니다.

---

Summernote 적용

 

Summernote.org

Summernote 공식 사이트에 가면 적용법에 대해 자세히 볼수 있습니다.

 

index.html

Vue Cli 로 만든 프로젝트 index.html 파일에 jQuery, Bootstrap, Summernote 링크를 적용해 줍니다.

Vue.js를 사용하며 왠만하면 jQuery는 사용안해볼려고 했는데, 제가 아직 Vue.js를 잘 다루지 못해서 그런지 기술적인 필요때문에 항상 jQuery를 사용하게 되네요. 🥲

 

editor.vue

 

적용할 .vue 파일에 summernote를 적용해 줍니다.

mounted()에서 jQuery를 사용해 div를 찾은다음 summernote()를 실행시켜 주면 일반적인 에디터가 생성됩니다.

 

모든 기능이 들어간 기본 Summernote 에디터

이후 실행해 보면 Summernote가 잘 적용된 모습을 볼 수 있습니다.

---

디자인 및 기능 수정

 

Summernote의 api를 사용해 간단하게 수정해 보았습니다.

 

editor.vue

 

높이와 상단 바가 변경된 summernote 에디터

저의 경우 에디터를 작성해서 나오는 html태그를 가공해야 되서, 최대한 필요한 입력 기능만 남겨서 유저의 행동을 제한하였습니다.

해당 기능을 통해 에디터를 조작할수 있습니다. 공식 문서의 api를 활용하면 더 다양한 기능 추가가 가능합니다.

 

해당 포스팅의 내용도 공식문서를 보면 자세히 나와있습니다. 저는 아직 개발을 많이 해보지 못한 초심자라서, 혹시 비슷한 분이 있으시면 도움이 되지 않을까 하네요.

---