รายการบนแถบเครื่องมือ

รายการบนแถบเครื่องมือทั้งหมดที่มี จัดตามหมวด

การทำงาน

รายการ	คำอธิบาย
undo	เลิกทำการเปลี่ยนแปลงล่าสุด
redo	ทำซ้ำการเปลี่ยนแปลงที่เลิกทำล่าสุด
resetChanges	ยกเลิกการเปลี่ยนแปลงทั้งหมดตั้งแต่เปิดตัวแก้ไขและล้างประวัติ (ถามก่อน)

AI

รายการ	คำอธิบาย
ai	เปิดกล่องโต้ตอบคำสั่ง AI หากมีการตั้งค่าไว้

รูปแบบ

รายการ	คำอธิบาย
bold	สลับตัวหนา
italic	สลับตัวเอียง
underline	สลับขีดเส้นใต้
strike	สลับขีดฆ่า

รูปแบบเพิ่มเติม

รายการ	คำอธิบาย
sup	สลับตัวยก
sub	สลับตัวห้อย
code	สลับโค้ดแบบอินไลน์
codeBlock	แทรกบล็อกโค้ดพร้อมไฮไลต์ไวยากรณ์
blockquote	แทรกบล็อกคำอ้างอิง

สไตล์

รายการ	คำอธิบาย
heading	ดรอปดาวน์เลือกระดับหัวข้อ (H1-H6)
fontFamily	ดรอปดาวน์เลือกแบบอักษร
fontSize	ดรอปดาวน์เลือกขนาดอักษร
lineHeight	ตั้งความสูงบรรทัด
textColor	สีข้อความ: พาเลต สีที่ใช้ล่าสุด HEX ปากกาดูดสี ตัวเลือกสีแบบกำหนดเอง
highlightColor	สีไฮไลต์: ตัวเลือกสีเดียวกัน โดย "ไม่ไฮไลต์" อยู่ก่อน

รายการ heading รับตัวเลือกหลังเครื่องหมายทวิภาค ได้แก่ ระดับหัวข้อ p เพื่อเพิ่มรายการย่อหน้า และ inline เพื่อแสดงเป็นปุ่มแยกแทนดรอปดาวน์:

<Tiptapify :items="['heading:p,2,3,inline', 'bold', 'italic']" />

การจัดแนว

รายการ	คำอธิบาย
left	จัดข้อความชิดซ้าย
center	จัดข้อความกึ่งกลาง
right	จัดข้อความชิดขวา
justify	จัดข้อความเต็มบรรทัด
align	ดรอปดาวน์การจัดแนว; align:left,center,right จำกัดตัวเลือก

รายการ

รายการ	คำอธิบาย
bulletList	สลับรายการแบบหัวข้อย่อย
orderedList	สลับรายการแบบลำดับเลข
taskList	สลับรายการงาน (ช่องทำเครื่องหมาย)
indent	เพิ่มการเยื้องของบล็อกปัจจุบัน
outdent	ลดการเยื้องของบล็อกปัจจุบัน

สื่อ

รายการ	คำอธิบาย
link	แทรก/แก้ไขลิงก์ หรือการ์ดลิงก์เมื่อใช้ linkPreview
image	แทรก/แก้ไขรูปภาพ: จาก URL หรืออัปโหลด ข้อความแสดงแทน คำบรรยาย ขนาด ตำแหน่ง
video	แทรก/แก้ไขวิดีโอ YouTube, Vimeo หรือไฟล์วิดีโอ (.mp4, .webm, .ogg, .mov)
iframe	ฝังหน้าเว็บด้วยที่อยู่หรือโค้ด iframe
emoji	เปิดตัวเลือกอีโมจิ (10 หมวดหมู่)
charmap	เปิดตัวเลือกอักขระพิเศษ
table	แทรกตาราง

อื่น ๆ

รายการ	คำอธิบาย
line	แทรกเส้นแบ่งแนวนอน
pagebreak	แทรกตัวแบ่งหน้า
source	สลับมุมมองซอร์ส HTML ดิบ
preview	สลับโหมดตัวอย่าง HTML
fullscreen	สลับโหมดแก้ไขเต็มหน้าจอ
formatClear	ล้างการจัดรูปแบบทั้งหมดจากส่วนที่เลือก
invisibleChar	แทรกอักขระที่มองไม่เห็น (ช่องว่าง ฯลฯ)

ตัวคั่น

ใช้ | เป็นตัวคั่นระหว่างกลุ่มปุ่มใน prop items แบบอาร์เรย์:

<Tiptapify
  :items="['bold', 'italic', '|', 'heading', 'bulletList', '|', 'undo', 'redo']"
/>

ตัวอย่างแถบเครื่องมือแบบสมบูรณ์

<template>
  <Tiptapify
    :items="[
      'undo', 'redo',
      '|',
      'heading', 'fontFamily', 'fontSize',
      '|',
      'bold', 'italic', 'underline', 'strike',
      '|',
      'sup', 'sub', 'code', 'codeBlock', 'blockquote',
      '|',
      'left', 'center', 'right', 'justify',
      '|',
      'bulletList', 'orderedList', 'taskList',
      '|',
      'link', 'image', 'video', 'iframe',
      '|',
      'emoji', 'charmap', 'table',
      '|',
      'ai',
      '|',
      'line', 'pagebreak', 'formatClear',
      '|',
      'source', 'preview', 'fullscreen'
    ]"
  />
</template>