Tiptapify

Vuetify 3 툴바를 구현한 Vue 3용 Tiptap 3 리치 텍스트 에디터

베타 상태

이 프로젝트는 현재 베타 단계입니다. 기능은 모두 갖추었지만 아직 수정해야 할 버그가 남아 있을 수 있습니다.

주요 기능

Vuetify 3 컴포넌트

Vuetify 3 컴포넌트만으로 구현한 아름다운 Material Design 툴바

30개 이상의 확장

리치 텍스트 서식, 미디어 임베드, 표, 구문 강조가 적용된 코드 블록

슬래시 명령

/를 입력하면 제목, 목록, 미디어 등을 빠르게 삽입하는 메뉴가 열립니다

다국어 지원

vue-i18n을 통해 20개 이상의 언어를 지원합니다

다크 테마

Vuetify 테마와 연동되는 다크/라이트 모드를 자동으로 지원합니다

TypeScript

모든 툴바 항목과 props의 타입을 내보내는 완전한 TypeScript 지원

빠른 시작

bash

npm i tiptapify
# or
pnpm i tiptapify

vue

<script setup lang="ts">
const handleEditorReady = (options) => {
  console.log('HTML:', options.getHTML())
  console.log('JSON:', options.getJSON())
}
</script>

<template>
  <Tiptapify
    placeholder="Start writing..."
    @editor-ready="handleEditorReady"
  />
</template>

피어 의존성

Tiptapify를 사용하려면 피어 의존성으로 Vue 3.x, Vuetify 3.x 또는 4.x, vue-i18n 11+, @mdi/js가 필요합니다. 전체 설정은 설치 가이드를 참고하세요.

라이선스

MIT — GitHub 저장소

Tiptapify ​

주요 기능 ​