vue-tiptap-editor-korean

한국어에 최적화된 Tiptap 기반 Vue 3 리치 텍스트 에디터입니다.

✨ 주요 기능

공통 기능

• 🇰🇷 한국어 최적화: 한글 타이포그래피에 최적화된 폰트 및 스타일링
• 🎨 다양한 텍스트 스타일: 굵게, 기울임, 밑줄, 취소선 등
• 🖼️ 이미지 번들: 개별 이미지, 연속 이미지, 슬라이드 형태로 이미지 삽입 가능
• 🎯 정렬 옵션: 왼쪽, 가운데, 오른쪽, 양쪽 정렬
• 🔤 폰트 커스터마이징: 프리텐다드, 나눔스퀘어, 나눔명조, 본명조 등
• 📏 줄간격 & 글자간격: 세밀한 텍스트 조정
• 🔗 링크 삽입: URL 링크 추가 및 관리
• 🌗 다크 모드 지원: 다크 테마 자동 대응
• � 반응형 디자인: 모바일 최적화

EditorFull 전용 기능

• 📝 모드 전환: 에디터/HTML/뷰어 모드 전환
• 📊 글자 수 카운터: 공백 포함/미포함 글자 수 실시간 표시

📦 설치

npm install vue-tiptap-editor-korean

🚀 사용 방법

전역 설치 (플러그인 방식)

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import VueTiptapEditorKorean from 'vue-tiptap-editor-korean'
import 'vue-tiptap-editor-korean/style.css'

const app = createApp(App)
app.use(VueTiptapEditorKorean)
app.mount('#app')

개별 컴포넌트 import

컴팩트 에디터 (TiptapEditorKorean)

<template>
  <div>
    <TiptapEditorKorean 
      v-model="content"
      :minHeight="'300px'"
      :placeholder="'여기에 내용을 입력하세요...'"
      @ready="onEditorReady"
    />
    
    ```vue
<Viewer :content="htmlContent" />
  </div>
</template>

<script>
import { TiptapEditorKorean, Viewer } from 'vue-tiptap-editor-korean'
import 'vue-tiptap-editor-korean/style.css'

export default {
  components: {
    TiptapEditorKorean,
    Viewer,
  },
  data() {
    return {
      content: '<p>초기 콘텐츠</p>',
    }
  },
  methods: {
    onEditorReady(editor) {
      console.log('에디터가 준비되었습니다', editor)
    }
  }
}
</script>

풀 기능 에디터 (TiptapEditorFull)

<template>
  <div>
    <TiptapEditorFull 
      v-model="content"
      :placeholder="'여기에 내용을 입력하세요...'"
      :showCharCount="true"
      :showModeSwitch="true"
      @mode-change="handleModeChange"
    />
  </div>
</template>

<script>
import { TiptapEditorFull } from 'vue-tiptap-editor-korean'
import 'vue-tiptap-editor-korean/style.css'

export default {
  components: {
    TiptapEditorFull,
  },
  data() {
    return {
      content: '<p>초기 콘텐츠</p>',
    }
  },
  methods: {
    handleModeChange(mode) {
      console.log('모드 변경:', mode) // 'editor' | 'html' | 'viewer'
    }
  }
}
</script>

🎛️ Props

TiptapEditorKorean (컴팩트 에디터)

| Prop | Type | Default | Description | |------|------|---------|-------------| | modelValue | String | '' | 에디터 콘텐츠 (v-model) | | showToolbar | Boolean | true | 툴바 표시 여부 | | editable | Boolean | true | 편집 가능 여부 | | placeholder | String | '내용을 입력하세요...' | 플레이스홀더 텍스트 | | minHeight | String | '200px' | 최소 높이 | | fontOptions | Array | ['프리텐다드', '나눔스퀘어', '나눔명조', '본명조'] | 폰트 옵션 목록 | | fontMapping | Object | {...} | 폰트 라벨-값 매핑 | | enableImageUpload | Boolean | true | 이미지 업로드 기능 활성화 | | onImageUpload | Function | null | 커스텀 이미지 업로드 핸들러 | | onImageRemove | Function | null | 커스텀 이미지 삭제 핸들러 |

TiptapEditorFull (풀 기능 에디터)

| Prop | Type | Default | Description | |------|------|---------|-------------| | modelValue | String | '' | 에디터 콘텐츠 (v-model) | | editable | Boolean | true | 편집 가능 여부 | | placeholder | String | '내용을 입력하세요...' | 플레이스홀더 텍스트 | | fontOptions | Array | ['프리텐다드', '나눔스퀘어', '나눔명조', '본명조'] | 폰트 옵션 목록 | | fontMapping | Object | {...} | 폰트 라벨-값 매핑 | | enableImageUpload | Boolean | true | 이미지 업로드 기능 활성화 | | onImageUpload | Function | null | 커스텀 이미지 업로드 핸들러 | | onImageRemove | Function | null | 커스텀 이미지 삭제 핸들러 | | showCharCount | Boolean | true | 글자 수 카운터 표시 여부 | | showModeSwitch | Boolean | true | 모드 전환 버튼 표시 여부 |

추가 Events:

• @mode-change: 모드 변경 시 발생 (editor/html/viewer)

Viewer (뷰어)

| Prop | Type | Default | Description | |------|------|---------|-------------| | content | String | '' | 표시할 HTML 콘텐츠 | | modelValue | String | '' | 표시할 HTML 콘텐츠 (v-model) |

📸 이미지 업로드 커스터마이징

<template>
  <TiptapEditorKorean 
    v-model="content"
    :onImageUpload="handleImageUpload"
    :onImageRemove="handleImageRemove"
  />
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      content: '',
    }
  },
  methods: {
    async handleImageUpload(file) {
      // 서버로 이미지 업로드
      const formData = new FormData()
      formData.append('image', file)
      
      const response = await axios.post('/api/upload', formData)
      
      // 반드시 { id, src, file_path } 형태로 반환
      return {
        id: response.data.id,
        src: response.data.url,
        file_path: response.data.url,
      }
    },
    
    async handleImageRemove(imageId) {
      // 서버에서 이미지 삭제
      await axios.delete(`/api/images/${imageId}`)
    }
  }
}
</script>

🎨 스타일 커스터마이징

에디터는 CSS 변수를 사용하여 쉽게 커스터마이징할 수 있습니다.

/* 라이트 모드 */
.tiptap-editor-korean {
  --editor-bg: #ffffff;
  --editor-text: #333333;
  --editor-border: #dddddd;
  --editor-toolbar-bg: #f8f9fa;
}

/* 다크 모드 */
[data-theme="dark"] .tiptap-editor-korean {
  --editor-bg: #1e1e1e;
  --editor-text: #e0e0e0;
  --editor-border: #444444;
  --editor-toolbar-bg: #2d2d2d;
}

🔧 고급 사용법

에디터 인스턴스 직접 제어

<template>
  <div>
    <TiptapEditorKorean 
      v-model="content"
      @ready="onReady"
    />
    <button @click="insertText">텍스트 삽입</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      editor: null,
    }
  },
  methods: {
    onReady(editor) {
      this.editor = editor
    },
    insertText() {
      if (this.editor) {
        this.editor.chain().focus().insertContent('삽입할 텍스트').run()
      }
    }
  }
}
</script>

커스텀 확장 기능 사용

import { TiptapEditorKorean } from 'vue-tiptap-editor-korean'
import { FontSize, LineHeight, LetterSpacing } from 'vue-tiptap-editor-korean'

// 커스텀 에디터 구성으로 사용 가능

📝 라이센스

MIT

🤝 기여

이슈 제보와 PR은 언제나 환영합니다!

📚 관련 링크

• Tiptap 공식 문서
• Vue 3 문서

🙏 감사의 말

이 프로젝트는 Tiptap을 기반으로 만들어졌습니다.