نص غني بتنسيق لارافل

هذا الموضوع مترجم، المصدر "Rich Text Laravel"

النصوص الغنية تُعدّ Rich Text Laravel حزمة أنشأها Tony Messias تُدمج محرر Trix (من 37 Signals) في تطبيقات Laravel. إذا كنت تنشئ أي نوع من واجهة المستخدم التي تتطلب من المستخدمين كتابة إدخال نص طويل عبر حقل نصي يحتاج إلى التنسيق، فمن المحتمل أنك ستحتاج إلى توفير وظائف محرر نص غني. قم بتثبيت حزمة Rich Text Laravel عبر Composer:

composer require tonysm/rich-text-laravel

بعد ذلك، شغّل أمر التثبيت:

php artisan richtext:install

حدّث نموذجك باستخدام سمة HasRichText وأضف خاصية $richTextAttributes:

<?php
 
namespace App\Models;
 
use Tonysm\RichTextLaravel\Models\Traits\HasRichText;
 
class Product extends Model
{
    use HasFactory;
    use HasRichText;
 
    /**
     * The dynamic rich text attributes.
     *
     * @var array<int|string, string>
     */
    protected $richTextAttributes = [
        'description',
    ];
 
    /**
     * The attributes that are mass assignable.
     *
     * @var array<int, string>
     */
    protected $fillable = [
        'name',
        'price',
        'type',
        'description',
    ];
 ...
}

إذا كان لديك أي فئات Form Request أو قواعد للتحقق من الصحة، فستحتاج إلى تحديثها أيضًا. على سبيل المثال:

$this->validate([
        'name' => ['required', 'string', 'max:255'],
        'price' => ['required', 'decimal:10,2'],
      'type' => ['required'],
        'description' => ['nullable', 'string'],
])

وأخيرًا، يمكنك استخدام مكوّن Blade x-trix-input لعرض المحرر:

<x-trix-input id="description" name="description" :value="old('description', $product->description?->toTrixHtml())" autocomplete="off" />

كما هو الحال مع معظم محرري النصوص الغنية، يمكنك تخصيص الأزرار التي تظهر في المحرر، ولتحقيق ذلك، يمكنك تعديل مكوّن x-trix-input. أيضًا، نظرًا لأنك تقوم بعرض HTML تم إنشاؤه بواسطة المستخدم، يجب عليك تطهير إدخال المستخدم لتجنب أي مشكلات أمنية. يوصي المطور باستخدام Symfony's HTML Sanitizer. إذا كنت تبحث عن محرر نص غني لإضافته إلى تطبيقاتك، فجرّب هذه الحزمة. يمكنك معرفة المزيد و عرض رمز المصدر على GitHub.

→ المقال السابق

المقال التالي ←