Στοιχεία γραμμής εργαλείων

Όλα τα διαθέσιμα στοιχεία της γραμμής εργαλείων, οργανωμένα ανά ενότητα.

Ενέργειες

Στοιχείο	Περιγραφή
undo	Αναίρεση της τελευταίας αλλαγής
redo	Επανάληψη της τελευταίας αναίρεσης
resetChanges	Απόρριψη όλων των αλλαγών από το άνοιγμα του επεξεργαστή και εκκαθάριση του ιστορικού (ζητά επιβεβαίωση)

AI

Στοιχείο	Περιγραφή
ai	Ανοίγει τον διάλογο prompt 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 ή μεταφόρτωση, alt, λεζάντα, μέγεθος, θέση
video	Εισαγωγή/επεξεργασία βίντεο YouTube, Vimeo ή αρχείου βίντεο (.mp4, .webm, .ogg, .mov)
iframe	Ενσωμάτωση σελίδας με τη διεύθυνσή της ή με τον κώδικα iframe
emoji	Άνοιγμα επιλογέα 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>