إضافة ميزة محرر النصوص في تطبيق Flutter لإضافة وتحرير النصوص وإضافة الصور والروابط

ما تبحث عنه هو Rich Text Editor وتستطيع إضافة تلك الميزة إلى تطبيقك باستخدام مكتبات مختلفة،  مثل حزمة rich_text_editor المتاحة في مستودعات حزم الـ Flutter، وتلك الحزمة توفر واجهة مستخدم جاهزة لتحرير النصوص وإضافة الصور والروابط، وإليك الطريقة:

1- قم بتحديث ملف pubspec.yaml الخاص بمشروعك لتضمين حزمة rich_text_editor، وأضف السطر التالي تحت تبويب dependencies:

dependencies:
  rich_text_editor: ^0.5.0

2- تشغيل الأمر التالي لتثبيت الحزمة

flutter pub get

3- افتح ملف الشاشة التي ترغب في إضافة محرر النصوص إليها واستيراد الحزمة.

import 'package:rich_text_editor/rich_text_editor.dart';

4- قم بإنشاء عنصر RichTextField في واجهة المستخدم الخاصة بالشاشة.

RichTextField(
  decoration: InputDecoration(
    labelText: 'Text Editor',
    border: OutlineInputBorder(),
  ),
  onSave: (text) {
    // يتم استدعاء هذا الدالة عند حفظ النص المحرر
    // يمكنك استخدام النص الذي تم حفظه بالطريقة التي تحتاجها هنا
    print('Saved text: $text');
  },
),

وهناك مكتبات أخرى مثل flutter_quill وsuper_editor وzefyrka وhtml_editor_enhanced، وأنصحك برؤية القائمة من هنا:

• https://fluttergems.dev/editor-syntax-highlighter/

بتاريخ الآن قال Mustafa Suleiman:

ما تبحث عنه هو Rich Text Editor وتستطيع إضافة تلك الميزة إلى تطبيقك باستخدام مكتبات مختلفة،  مثل حزمة rich_text_editor المتاحة في مستودعات حزم الـ Flutter، وتلك الحزمة توفر واجهة مستخدم جاهزة لتحرير النصوص وإضافة الصور والروابط، وإليك الطريقة:

1- قم بتحديث ملف pubspec.yaml الخاص بمشروعك لتضمين حزمة rich_text_editor، وأضف السطر التالي تحت تبويب dependencies:

dependencies:
  rich_text_editor: ^0.5.0

2- تشغيل الأمر التالي لتثبيت الحزمة

flutter pub get

3- افتح ملف الشاشة التي ترغب في إضافة محرر النصوص إليها واستيراد الحزمة.

import 'package:rich_text_editor/rich_text_editor.dart';

4- قم بإنشاء عنصر RichTextField في واجهة المستخدم الخاصة بالشاشة.

RichTextField(
  decoration: InputDecoration(
    labelText: 'Text Editor',
    border: OutlineInputBorder(),
  ),
  onSave: (text) {
    // يتم استدعاء هذا الدالة عند حفظ النص المحرر
    // يمكنك استخدام النص الذي تم حفظه بالطريقة التي تحتاجها هنا
    print('Saved text: $text');
  },
),

وهناك مكتبات أخرى مثل flutter_quill وsuper_editor وzefyrka وhtml_editor_enhanced، وأنصحك برؤية القائمة من هنا:

• https://fluttergems.dev/editor-syntax-highlighter/

 

بس كيف ممكن اسويه مع فايربايز ممكن توضييح اكثر""

في دالة onSave التي قمت بتعريفها  في المثال السابق في RichTextField، قم بتنفيذ الخطوات التالية لحفظ النص والصور والروابط في Firebase:

1. استخدم Firebase Auth للتحقق من هوية المستخدم والتأكد من أنه مسجل دخوله.
2. استخدم Firebase Firestore لإنشاء وثيقة جديدة وحفظ النص والصور والروابط في حقول مناسبة، وباستطاعتك تخزين الصور في تخزين Firebase Storage وتخزين روابطها في Firestore، وتخصيص الطريقة التي تحفظ بها البيانات في Firebase حسب طبيعة تطبيقك.

مثلاً، لحفظ محتوى المحرر (النص والصور والروابط) في Firebase Firestore، من الممكن تعريف حقول كالتالي:

• حقل "نص" (Text field) لتخزين النص الذي يتم إدخاله أو تحريره.
• حقل "صورة" (Image field) لتخزين الصورة المحملة من المحرر.
• حقل "روابط" (Links field) لتخزين الروابط المدخلة.

لإنشاء محرر نصوص يمكن إضافة الصور والنصوص في تطبيق Flutter، يمكنك استخدام حزمة "flutter_quill". تعتبر "flutter_quill" حزمة تجمع بين محرر النصوص المنسق (Rich Text Editor) وعرض محتوى غني ومخزن المستندات. توفر هذه الحزمة مجموعة من الأدوات والوظائف للتعامل مع النصوص المنسقة وإدراج الصور والروابط.

لبدء استخدام "flutter_quill"، يمكنك اتباع الخطوات التالية:

قم بإضافة حزمة "flutter_quill" إلى ملف الاعتماديات (pubspec.yaml) في مشروع Flutter الخاص بك:

dependencies:
  flutter_quill: ^3.0.0

قم بتحديث الاعتماديات عن طريق تشغيل الأمر التالي في مجلد مشروعك:

flutter pub get

استيراد حزمة "flutter_quill" في ملف الخاص بك:

import 'package:flutter_quill/flutter_quill.dart';

قم بإنشاء محرر النصوص (QuillEditor) في شجرة واجهة المستخدم الخاصة بك:

QuillEditor(
  controller: _controller, // تحكم في محتوى المحرر
  readOnly: false, // إذا كانت القراءة فقط أم لا
  expands: false, // إمكانية التوسيع التلقائي للمحرر
),

قم بتحكم في المحتوى الذي يتم عرضه وتحريره باستخدام مراقب المحتوى (QuillController):

final _controller = QuillController.basic();

// لإضافة نص
_controller.document.insert('مرحبًا بك في التطبيق!');

// لإدراج صورة من ملف محلي
final image = FileImage(File('path_to_image.jpg'));
final index = _controller.document.length - 1;
_controller.document.insert(index, BlockEmbed.image(image));

// لإضافة رابط
final linkStyle = Attribute.link.fromString('https://example.com');
_controller.formatSelection(linkStyle);

// لاستعراض المحتوى المنسق
print(_controller.document.toPlainText());

بالإضافة لمكتبات الموجودة في التعليقات السابقة هناك عدة طرق بديلة لإضافة محرر نصوص في تطبيق Flutter:

•  استخدام التبعية flitter_quill  بدلا من rich_text_editor. flitter_quill هي مكتبة مبنية على قلم Quill الشهير وتوفر مزيدا من الميزات. وشرحها موجود في التعليق السابق
•  استخدام حلول جاهزة كاملة مثل Text Editor SDK من Aample. هذه الحلول توفر الكثير من الميزات وتسهل التطبيق.
•  استخدام الـWebView لعرض محرر النصوص المبني على الويب. هذا يسمح باستخدام محررات نصوص واسعة الانتشار مثل TinyMCE أو CKEditor.
•  استخدام مكتبات جاهزة لمؤشرات النص. مثلما flutter_text_input_highlight و flutter_editable_text.

على العموم، إذا كنت تريد فقط ميزة بسيطة مع بعض أدوات التنسيق، فإن rich_text_editor جيدة. ولكن إذا كنت تريد محرر نصوص متطور مع الكثير من الميزات، فإن من الأفضل الاستعانة بحلول جاهزة.