تحرير الصور هو ميزة قوية لكل محرر WYSIWYG. إنه يعزز بشكل كبير قدرات التطبيق ويسعد المستخدمين الذين يرغبون في بذل المزيد من الجهد مع صورهم التي تم تحميلها.

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

على سبيل المثال ، في بعض LMS و CMS وأنظمة إدارة المستندات ، يحتاج المستخدمون إلى تحرير الصور داخل محرر WysiWyg HTML.

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

مفتاح الوجبات السريعة

• استخدم تحويلات صور Froala المدمجة في Froala لإضافة تحرير الصورة بسهولة.

• تخصيص خيارات Filestack للحصول على مزيد من التحكم في تحميل الصور وتعديلها.

• التعامل مع أحداث Froala لأداء الإجراءات كلما يتفاعل المستخدم مع Filestack.

• قم بإعداد محرر WysiWyg في بضع ثوان ومع بضعة أسطر.

• احفظ الكثير من الوقت من خلال دمج محرر مع تحرير الصور المدمج.

إعداد محرر WysiWyg

قبل أن ندخل في تحرير الصور ، نحتاج أولاً إلى محرر wysiwyg. للقيام بذلك ، قم بتضمين ملفات محرر Froala في تطبيقك كما تريد (نحن نذهب مع CDN في هذا واحد). وبعد ذلك ، نهيئة المحرر داخل A Div عنصر مع المعرف " Froala-Editor: "

    
    
    

    
    
    
    



    




On your JS file, add the following line of code:



new FroalaEditor('#froala-editor');




 عند تشغيل تطبيق الويب الخاص بك ، يجب عليك بعد ذلك رؤية الشاشة التالية: 

  

 بمجرد تشغيل المحرر الخاص بنا ، سنضيف ميزات تحرير الصور عن طريق تمكين المكون الإضافي المدمج أصلاً. نفعل ذلك من خلال تحديد خيارات للمحرر: 



new FroalaEditor('#froala-editor',{
    filestackOptions: {
        filestackAPI: 'YourFilestackAPIKey',
        uploadToFilestackOnly: true,
        pickerOptions: {
            accept: [
                '.pdf',
                'image/jpeg',
                'image/png',
                'image/*',
                'video/*',
                'audio/*'
            ],
            fromSources: [
                'local_file_system',
                'url',
                'facebook',
                'instagram'
            ]
        }
    },
    toolbarButtons: {
        'moreRich': {
            'buttons': ['openFilePickerImageOnly', 'openFilePickerVideoOnly', 'openFilePicker', 'insertLink', 'insertTable', 'emoticons', 'specialCharacters', 'insertHR'],
            'buttonsVisible': 3
        },
        'moreText': {
            'buttons': ['bold', 'italic', 'underline', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'clearFormatting']
        },
        'moreParagraph': {
            'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote']
        },
        'moreMisc': {
            'buttons': ['undo', 'redo', 'fullscreen', 'selectAll', 'html', 'help'],
            'align': 'right',
            'buttonsVisible': 2
        }
    },
    events: {
        'filestack.uploadedToFilestack': function (response) {
            console.log("Callback is triggered for upload to Filestack ",)
        },
        'filestack.filestackPickerOpened': function (response) {
            console.log("Callback is triggered for picker opened ",)
        },
        'filestack.filestackPickerClosed': function (response) {
            console.log("Callback is triggered for picker closed ",)
        },
        'filestack.uploadFailedToFilestack': function (response) {
            console.log(response);
        },
    },
    heightMin: 500,
    heightMax: 1000
});




 هنا ، أعلننا بعض الخيارات لأزرار شريط أدوات المحرر ، والحجم ، والأحداث ، وخيارات إضافية لـ Filestack. في خاصية  FilestackOptions  ، أعلننا مفتاح API Filestack الخاص بنا ، وهو منطقية تحدد ما إذا كانت الملفات يتم تحميلها حصريًا إلى Filestack ، وبعض خيارات Picker. تحدد هذه الخيارات أنواع الملفات والمصادر المسموح بها. 

 وإذا لم تقم بالفعل ، فاحصل على مفتاح API من خلال إنشاء حساب Filestack مجاني. بعد وضع كل من Froala و Filestack ، انتهينا! يمكنك الآن استخدام محرر WYSIWYG متقدم مع ميزات تحرير الصور داخل التطبيق الخاص بك. أيضًا ، إليك كيفية ظهور المحرر الآن: 

  

 لاحظ كيف أصبح للمحرر الآن تحجيم أفضل. الأهم من ذلك ، لدينا الآن أزرار مع أيقونات Filestack فيها. تتيح هذه الأزرار للمستخدمين تحميل الصور ومقاطع الفيديو والملفات الأخرى من خلال Filestack. الآن ، لتظهر لك بعض قدرات Filestack Plugin ، دعنا نغوص في بعض حالات استخدام تحرير الصور. 


  
  
   استخدم حالات تحرير الصور داخل محرر WYSIWYG 



  
  
   زراعة صورة 


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

  

 هذه هي الطريقة التي يجب أن يبدو بها زراعة الصورة باستخدام Filestack. ستحصل على الاختيار من بين خيارات المحاصيل المختلفة ، بما في ذلك الشكل الحر والدائرة والمربع و 16: 9 ، والتي نستخدمها هنا. عندما تنتهي من المحاصيل ، انقر فوق الزر Check واضغط على "حفظ". 


  
  
   تطبيق المرشحات 


 أصبحت المرشحات جزءًا مهمًا من كل تطبيق يتولى الصور. مع Filestack و Froala ، يمكنك تحقيق ذلك من خلال النقر على أيقونة Filestack بجانب صورة تم تحميلها والانتقال إلى علامة التبويب "المرشحات". من هناك ، يمكنك الاختيار من بين العديد من مرشحات الصور ، مثل Polaroid و Sepia و Grayscale والمزيد. الآن ، دعونا نطبق مرشحًا على صورتنا المقطوعة. 

  


  
  
   إضافة النص وتحسينه 


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

  


  
  
   إدخال حدود 


 يمكننا أيضًا إدخال حدود أو إطار على صورتنا بسهولة باستخدام ميزات تحويل Filestack. دعنا نذهب إلى علامة التبويب "الحدودية" وتخصيص حدود لصورتنا: 

  

 بعد النقر فوق "حفظ" ، يجب أن نرى صورتنا المحسنة على المحرر. من هناك ، يمكنك التحقق من الصورة التي تم تحميلها على لوحة معلومات Filestack الخاصة بك. انتقل إلى "متصفح المحتوى" وسترى صورتنا ، والتي يمكنك تنزيلها بشكل منفصل أو على تطبيقك. للرجوع إليها ، إليك كيفية رعاية الصورة لإجراء كل هذه العمليات: 

  


  
  
  خاتمة


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

 باتباع هذا الدليل ، يمكنك الآن البدء في تنفيذ هذه الميزات دون جهد كبير. الآن ، أنت مستعد لتقديم تجربة سلسة وممتعة لتحرير الصور تتيح للمستخدمين ضبط صورهم دون مغادرة المحرر. 

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