هل تستخدم محررات WYSIWYG HTML في مشاريعك؟ أصبحت هذه الأدوات سهلة الاستخدام ذات شعبية متزايدة بين مطوري الويب ومنشئي المحتوى، حيث توفر واجهة بديهية لصياغة محتوى الويب دون الخوض في تعليمات HTML البرمجية الأولية. على الرغم من أن هؤلاء المحررين يتمتعون بالقوة خارج الصندوق، إلا أن إمكاناتهم الحقيقية غالبًا ما يتم الكشف عنها من خلال التخصيص.

الوجبات الرئيسية

• يمكنك إضافة ميزات جديدة إلى برامج تحرير WYSIWYG HTML

• تساعد الأزرار المخصصة المستخدمين على تنسيق المحتوى بسهولة

• تغيير مظهر المحرر يمكن أن يتناسب مع نمط موقعك

لماذا تغيير محررات HTML WYSIWYG؟

يتيح لك تغيير محرر WYSIWYG HTML:

1. إضافة الميزات التي يحتاجها مشروعك

2. تسهيل الاستخدام على المستخدمين

3. استمر في التنسيق بنفس الطريقة عبر موقعك

الآن، دعونا نرى كيف يمكننا القيام بذلك بمثال حقيقي.

إضافة زر تمييز مفيد

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

ثم يمكننا إضافة الزر الجديد:

// Make a new icon
FroalaEditor.DefineIcon('highlight', {NAME: 'star'});

// Create a new button
FroalaEditor.RegisterCommand('highlight', {
  title: 'Highlight',
  icon: 'highlight',
  focus: true,
  undo: true,
  refreshAfterCallback: true,
  callback: function () {
    this.html.insert(''   this.selection.text()   '');
  }
});

// Start the editor with our new button
new FroalaEditor('#editor', {
  toolbarButtons: ['bold', 'italic', 'underline', '|', 'highlight']
});

يقوم هذا الكود ببعض الأشياء:

1. يُنشئ رمزًا جديدًا لزرنا

2. تخبر المحرر بما يجب فعله عندما ينقر شخص ما على الزر

3. يضيف زرنا الجديد إلى شريط الأدوات

لجعل النص المميز يبدو جيدًا، أضفنا بعض الأنماط:

.fr-view .custom-highlight {
  background-color: yellow;
  padding: 2px;
  border-radius: 2px;
}

جعل المحرر يبدو جيدًا

يمكنك أيضًا تغيير شكل المحرر. إليك طريقة بسيطة للقيام بذلك:

new FroalaEditor('#editor', {
  toolbarButtons: ['bold', 'italic', 'underline', '|', 'highlight'],
  toolbarButtonsSM: ['bold', 'italic', 'underline', '-', 'highlight'],
  placeholderText: 'Type here...',
  charCounterCount: false,
  toolbarSticky: false,
  theme: 'royal'
});

يقوم هذا التغيير بعدة أشياء:

• يقوم بإعداد أزرار لأحجام مختلفة للشاشة

• يضيف بعض النص لإظهار مكان الكتابة

• يقوم بإيقاف تشغيل عداد الأحرف

• يجعل شريط الأدوات يتحرك مع الصفحة

• يستخدم سمة معدة مسبقًا

نصائح لتغيير محررات HTML WYSIWYG

عند تغيير هؤلاء المحررين، ضع هذه النصائح في الاعتبار:

1. ابدأ صغيرًا : قم بإجراء تغييرات صغيرة أولاً قبل تجربة التغييرات الكبيرة.

2. استخدم ما هو موجود : استخدم أدوات المحرر المدمجة عندما تستطيع.

3. اختبار الكثير: تأكد من أن التغييرات التي أجريتها تعمل في متصفحات مختلفة.

4. فكر في السرعة: قد تؤدي التغييرات الكبيرة إلى إبطاء الأمور، لذا اختبرها باستخدام الكثير من المحتوى.

5. ابق على اطلاع : تحقق من الميزات الجديدة التي قد تساعدك.

استخدام المحررين المتغيرين في أطر عمل مختلفة

يمكنك استخدام هذه المحررات المتغيرة في العديد من أطر عمل الويب. إليك كيفية استخدام محررنا المتغير في React:

import React, { useEffect, useRef } from 'react';
import FroalaEditor from 'react-froala-wysiwyg';

const MyEditor = () => {
  const editorRef = useRef(null);

  useEffect(() => {
    if (editorRef.current) {
      FroalaEditor.DefineIcon('highlight', {NAME: 'star'});
      FroalaEditor.RegisterCommand('highlight', {
        title: 'Highlight',
        icon: 'highlight',
        focus: true,
        undo: true,
        refreshAfterCallback: true,
        callback: function () {
          this.html.insert(''   this.selection.text()   '');
        }
      });
    }
  }, []);

  const config = {
    toolbarButtons: ['bold', 'italic', 'underline', '|', 'highlight'],
    placeholderText: 'Type here...'
  };

  return ;
};

export default MyEditor;

يحتوي مكون React هذا على محررنا المتغير، مما يسهل استخدامه في تطبيق React الخاص بك.

الختام

تعد برامج تحرير WYSIWYG HTML أدوات رائعة لإنشاء المحتوى. علاوة على ذلك، عندما تقوم بتغييرها لتناسب احتياجاتك، فإنها تصبح أفضل. ومن خلال إضافة أزرار جديدة، وتغيير مظهرها، وملاءمتها في مشروعك، يمكنك إنشاء أداة تحرير مثالية.

تذكر أن الهدف هو جعل المحرر يعمل بشكل مناسب لك. مع بعض التغييرات الذكية، يمكنك تحويل محرر جيد إلى محرر رائع يناسب عملك بسلاسة.

لذا، تفضل وجربه! قم بتغيير محرر WYSIWYG HTML الخاص بك وانظر إلى أي مدى يمكن أن يكون أفضل للمستخدمين.

تم نشر هذا في البداية على مدونة Froala. ]