عناصر شريط الأدوات

جميع عناصر شريط الأدوات المتاحة مرتبة حسب القسم.

الإجراءات

العنصر	الوصف
`undo`	التراجع عن آخر تغيير
`redo`	إعادة آخر تغيير تم التراجع عنه
`resetChanges`	تجاهل جميع التغييرات منذ فتح المحرر ومسح السجل (يطلب التأكيد أولًا)

الذكاء الاصطناعي

العنصر	الوصف
`ai`	يفتح نافذة طلب الذكاء الاصطناعي إذا كان مُعدًّا

التنسيق

العنصر	الوصف
`bold`	تبديل النص العريض
`italic`	تبديل النص المائل
`underline`	تبديل التسطير
`strike`	تبديل الشطب

تنسيق إضافي

العنصر	الوصف
`sup`	تبديل الرمز العلوي
`sub`	تبديل الرمز السفلي
`code`	تبديل الشيفرة المضمّنة في السطر
`codeBlock`	إدراج كتلة شيفرة مع تلوين الصيغة
`blockquote`	إدراج اقتباس

النمط

العنصر	الوصف
`heading`	قائمة منسدلة لاختيار مستوى العنوان (H1-H6)
`fontFamily`	قائمة منسدلة لاختيار نوع الخط
`fontSize`	قائمة منسدلة لاختيار حجم الخط
`lineHeight`	ضبط ارتفاع السطر
`textColor`	لون النص: لوحة ألوان، والألوان الأخيرة، وHEX، وأداة التقاط اللون، ومنتقٍ مخصص
`highlightColor`	لون التمييز: المنتقي نفسه، ويأتي خيار «بدون تمييز» أولًا

يقبل العنصر heading خيارات بعد النقطتين الرأسيتين: مستويات العناوين، وp لإضافة عنصر الفقرة، وinline لعرضها كأزرار منفصلة بدلًا من قائمة منسدلة:

vue

<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`	إدراج صورة أو تعديلها: عبر رابط أو رفع، ونص بديل، وتعليق، وحجم، وموضع
`video`	إدراج فيديو YouTube أو Vimeo أو ملف فيديو (`.mp4` و`.webm` و`.ogg` و`.mov`) أو تعديله
`iframe`	تضمين صفحة عبر عنوانها أو عبر كود iframe الخاص بها
`emoji`	فتح منتقي الرموز التعبيرية (10 فئات)
`charmap`	فتح منتقي الأحرف الخاصة
`table`	إدراج جدول

متنوعة

العنصر	الوصف
`line`	إدراج خط أفقي
`pagebreak`	إدراج فاصل صفحة
`source`	تبديل عرض مصدر HTML الخام
`preview`	تبديل وضع معاينة HTML
`fullscreen`	تبديل وضع التحرير بملء الشاشة
`formatClear`	مسح كل التنسيق من التحديد
`invisibleChar`	إدراج أحرف غير مرئية (مسافات وغيرها)

الفواصل

استخدم | كفاصل بين مجموعات الأزرار في الخاصية items عند كتابتها على شكل مصفوفة:

vue

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

vue

<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>

عناصر شريط الأدوات ​

الإجراءات ​

الذكاء الاصطناعي ​

التنسيق ​

تنسيق إضافي ​

النمط ​

المحاذاة ​

القوائم ​

الوسائط ​

متنوعة ​

الفواصل ​

مثال كامل لشريط الأدوات ​