Tiptapify

เอดิเตอร์ rich text Tiptap 3 สำหรับ Vue 3 พร้อมแถบเครื่องมือที่สร้างด้วย Vuetify 3

สถานะเบต้า

ขณะนี้โปรเจกต์อยู่ในสถานะ Beta ฟีเจอร์ครบถ้วนแล้ว แต่ยังอาจมีบั๊กที่ต้องแก้ไข

ฟีเจอร์

คอมโพเนนต์ Vuetify 3

แถบเครื่องมือแบบ Material Design ที่สวยงาม สร้างขึ้นจากคอมโพเนนต์ Vuetify 3 ทั้งหมด

เอ็กซ์เทนชันกว่า 30 รายการ

การจัดรูปแบบข้อความ การฝังสื่อ ตาราง และบล็อกโค้ดพร้อมไฮไลต์ไวยากรณ์

Slash Commands

พิมพ์ / เพื่อเปิดเมนูแทรกด่วนสำหรับหัวข้อ รายการ สื่อ และอื่น ๆ

การแปลภาษา

รองรับกว่า 20 ภาษาผ่าน vue-i18n

ธีมมืด

รองรับโหมดมืด/สว่างอัตโนมัติ และทำงานร่วมกับธีม Vuetify ของคุณ

TypeScript

รองรับ TypeScript เต็มรูปแบบ พร้อมไทป์ที่ export ไว้สำหรับรายการแถบเครื่องมือและ props ทั้งหมด

เริ่มต้นอย่างรวดเร็ว

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>

Peer Dependencies

Tiptapify ต้องการ Vue 3.x, Vuetify 3.x หรือ 4.x, vue-i18n 11+ และ @mdi/js เป็น peer dependencies ดูขั้นตอนการตั้งค่าทั้งหมดได้ที่คู่มือการติดตั้ง

สัญญาอนุญาต

MIT — GitHub Repository

Tiptapify ​

ฟีเจอร์ ​