관리 메뉴
따꿍의 프로젝트
[2026.01.18] 에디터 TF팀을 위한 TipTap 조사 본문
TipTap 기능
TipTap Install 방식
npm install @tiptap/react @tiptap/pm @tiptap/starter-kit@tiptap/react: The React bindings for Tiptap including Tiptap's core functionality.
@tiptap/pm: Tiptap's ProseMirror dependencies, which are required for the editor to function.
@tiptap/starter-kit: A collection of commonly used extensions that provide basic functionality like paragraphs, headings, bold, italic, and more.
To actually start using Tiptap we need to create a new component. Let's call it Tiptap and add the following example code in src/Tiptap.tsx.
// src/Tiptap.tsx
import { useEditor, EditorContent } from '@tiptap/react'
import { FloatingMenu, BubbleMenu } from '@tiptap/react/menus'
import StarterKit from '@tiptap/starter-kit'
const Tiptap = () => {
const editor = useEditor({
extensions: [StarterKit], // define your extension array
content: '<p>Hello World!</p>', // initial content
})
return (
<>
<EditorContent editor={editor} />
<FloatingMenu editor={editor}>This is the floating menu</FloatingMenu>
<BubbleMenu editor={editor}>This is the bubble menu</BubbleMenu>
</>
)
}
export default Tiptap스노로즈 에디터에서 필요한 기능
- 기본 에디터:
- 글꾸: 폰트종류/크기/굵기/기울이기/밑줄/취소/색(배경, 글자)
- 서식: 정렬/줄간격/목록
- 그림: 그림 추가(글 사이), 주석
- 확장성: 투표, 지도, 링크, 이모티콘 등
'웹프로젝트 > 스노로즈' 카테고리의 다른 글
| [2026.01.27] merge vs rebase vs squash vs cherry-pick (0) | 2026.01.27 |
|---|---|
| [2026.01.27] mutateAsync의 에러처리 (0) | 2026.01.27 |
| [2026.01.08] 이미지 리뷰 및 리팩토 (0) | 2026.01.08 |
| [2025.01.03] Range 요청에 대하여 (0) | 2026.01.03 |
| [2025.12.29] Add Guidance Image to WritePostPage (0) | 2025.12.29 |