แถบเครื่องมือที่กำหนดเอง

การแสดงเฉพาะบางรายการ

ใช้ prop items เพื่อแสดงเฉพาะปุ่มบนแถบเครื่องมือที่ต้องการ โดยส่งอาร์เรย์ของชื่อรายการ:

<template>
  <Tiptapify
    :items="['bold', 'italic', 'underline', '|', 'heading', 'bulletList', 'orderedList', '|', 'link', 'image', '|', 'undo', 'redo']"
    placeholder="Custom toolbar..."
  />
</template>

ใช้ | เป็นตัวคั่นระหว่างกลุ่มปุ่ม

ดรอปดาวน์สไตล์รายการ

ส่วนต่อท้าย :styles จะเปลี่ยนปุ่มรายการให้เป็นดรอปดาวน์สไตล์เครื่องหมาย/การเรียงลำดับ: ปุ่มรายการจะเปิดตารางตัวเลือก list-style-type ที่บันทึกเป็นอินไลน์สไตล์ ตารางนี้เรนเดอร์ภายในพื้นผิวเมนูของสกิน จึงเปลี่ยนตามสกินที่ใช้อยู่ (คู่มือสกิน):

<template>
  <Tiptapify
    :items="['bold', 'italic', '|', 'bulletList:styles', 'orderedList:styles', '|', 'undo', 'redo']"
    placeholder="Open the list styles dropdowns..."
  />
</template>

การยกเว้นรายการ

ใช้ items-exclude ร่วมกับ items เพื่อแสดงรายการบนแถบเครื่องมือส่วนใหญ่ แต่ยกเว้นบางรายการ:

<template>
  <Tiptapify
    :items="['bold', 'italic', 'underline', 'strike']"
    :items-exclude="true"
    placeholder="Excluding unwanted items..."
  />
</template>

เซกชันที่กำหนดเอง

จัดกลุ่มรายการเป็นเซกชันที่มีชื่อของคุณเองโดยใช้ออบเจกต์:

<script setup lang="ts">
const customItems = {
  formatting: ['bold', 'italic', 'underline', 'strike'],
  headings: ['heading'],
  lists: ['bulletList', 'orderedList', 'taskList'],
  media: ['link', 'image', 'video'],
}
</script>

<template>
  <Tiptapify
    :items="customItems"
    placeholder="Custom sections toolbar..."
  />
</template>

เอกสารอ้างอิงเซกชันของแถบเครื่องมือ

รายการบนแถบเครื่องมือถูกจัดเป็นเซกชัน เซกชันที่มีทั้งหมดมีดังนี้:

เซกชัน	รายการ
actions	undo, redo
format	bold, italic, underline, strike
formatExtra	sup, sub, code, codeBlock, blockquote
style	heading, fontFamily, fontSize, lineHeight, textColor, highlightColor
alignment	left, center, right, justify
list	bulletList, orderedList, taskList, indent, outdent
media	link, image, video, iframe, emoji, charmap, table
misc	line, pagebreak, source, preview, fullscreen, formatClear, invisibleChar

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

<template>
  <Tiptapify
    :toolbar="false"
    placeholder="No toolbar — use the bubble menu instead..."
  />
</template>

คอมโพเนนต์แถบเครื่องมือที่กำหนดเอง

เพิ่มปุ่มของคุณเองด้วย prop customExtensions แต่ละรายการคือเซกชันของแถบเครื่องมือ — ใช้ชื่อเซกชันที่มีในตัว (misc, media, …) เพื่อรวมปุ่มของคุณเข้ากับกลุ่มที่มีอยู่ หรือใช้ชื่อใหม่เพื่อสร้างกลุ่มแยกที่แสดงต่อจากเซกชันในตัว:

<script setup lang="ts">
import BlockquoteButton from './BlockquoteButton.vue'

const customExtensions = [{
  section: 'custom',
  group: true,
  components: [{ name: 'blockquoteBtn', component: BlockquoteButton }],
}]
</script>

<template>
  <Tiptapify :custom-extensions="customExtensions" />
</template>

คอมโพเนนต์แบบกำหนดเองถูกเรนเดอร์ภายใน <Tiptapify> จึงเข้าถึงค่าที่ใช้ร่วมกันเดียวกับปุ่มในตัวได้ ได้แก่ เอดิเตอร์ คำแปล และคอนฟิกระดับเอดิเตอร์:

<!-- BlockquoteButton.vue -->
<script setup lang="ts">
import { inject, type Ref } from 'vue'
import { TipTapEditor, useTiptapifyConfig } from 'tiptapify'

const editor = inject('tiptapifyEditor') as Ref<TipTapEditor>
const { variantBtn } = useTiptapifyConfig()
</script>

<template>
  <VBtn
    :color="editor.isActive('blockquote') ? 'primary' : ''"
    :variant="variantBtn"
    size="32"
    @click="editor.commands.toggleBlockquote()"
  >
    Quote
  </VBtn>
</template>

• useTiptapifyConfig() ส่งคืนคอนฟิกระดับเอดิเตอร์ (variantBtn, variantField) คอมโพเนนต์แบบกำหนดเองจึงมีสไตล์ตรงกับแถบเครื่องมือในตัวโดยอัตโนมัติ
• prop variantBtn ยังคงถูกส่งให้ทุกคอมโพเนนต์บนแถบเครื่องมือเพื่อความเข้ากันได้ย้อนหลัง — คอมโพเนนต์ที่เขียนก่อนมีคอนฟิกที่ใช้ร่วมกันยังทำงานได้เหมือนเดิม
• inject('tiptapifyI18n') ให้ฟังก์ชันแปลเดียวกับที่ปุ่มในตัวใช้