search

hunter-hwang-dev / _hunterpedia-vue

React로 마이그레이션 하기 전 Vue.js 테스트 (2024-11-19 현재 사용하지 않음.)
1 stars 0 forks source link

텍스트 에디터 만들기: Quill 사용해서 #32

Open hunter-hwang-dev opened 2 weeks ago

hunter-hwang-dev commented 2 weeks ago

Image https://www.geeksforgeeks.org/how-to-create-text-editor-using-javascript-and-html-dom/

  1. html에서 버튼을 만듬
  2. js function에서 document.getElementById("textarea1").style.textTransform = "capitalize";이런 식으로 변환하기
  3. 에디터 자체의 레이아웃을 css로 이쁘게 다듬어줌
  4. 에디터로 쓴 글 결과물 레이아웃도 이쁘게 정돈하면 끝~!
hunter-hwang-dev commented 2 weeks ago

골자는 알았는데, 추가 강의도 좀 들어 보자. https://www.youtube.com/watch?v=1EXkYPxnqOA Image

hunter-hwang-dev commented 2 weeks ago

어휴 정신없는데? 그냥 geeks for geeks 안내대로 하면 될 것 같음;;

hunter-hwang-dev commented 2 weeks ago

근데 이렇게 바닐라로 하나하나 다듬는거 머리 펑 터질라고 함. https://github.com/slab/quill < Quill 쓰자!

따로 npm 어쩌고 할 거 없이, 이 자체가 css 양식이라서 그냥 link해서 들고 오면 됨. Image

hunter-hwang-dev commented 2 weeks ago

Image 근데 npm install quill 할 수 있네. 

<link
  href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css"
  rel="stylesheet"
/>

하는거랑 차이가 뭐지?

hunter-hwang-dev commented 2 weeks ago

세부사항을 와자작 다듬으려면 임베드해서 뜯어보아야 하는 것 같은데!