छवि संपादन प्रत्येक WYSIWYG संपादक के लिए एक शक्तिशाली विशेषता है। यह एक एप्लिकेशन की क्षमताओं को बढ़ाता है और उन उपयोगकर्ताओं को प्रसन्न करता है जो अपनी अपलोड की गई छवियों के साथ अधिक करना चाहते हैं।

चाबी छीनना

] ]

• ] ऐसा करने के लिए, अपने एप्लिकेशन में फ्रॉला संपादक फ़ाइलों को शामिल करें, हालांकि आप चाहते हैं (हम इस एक में सीडीएन के साथ जा रहे हैं)। और फिर, हम संपादक को एक

  div

  तत्व के साथ id के साथ शुरू करते हैं "
froala-संपादक:
• "

फ्रॉला और फ़िलस्टैक के साथ छवि संपादन शीर्षक> >>
आपकी js फ़ाइल पर, कोड की निम्न पंक्ति जोड़ें:

]

जब आप अपना वेब एप्लिकेशन चलाते हैं, तो आपको निम्न स्क्रीन देखना चाहिए:

] हम संपादक के लिए विकल्प निर्दिष्ट करके करते हैं:

] FileStackOptions: { FileStackapi: 'yourfilestackapikey', UploadTofileStackonly: सच, पिकरपोटेशन: { स्वीकार करना: [ '.pdf', 'छवि/jpeg', 'छवि/पीएनजी', 'छवि/*', 'वीडियो/*', 'ऑडियो/*' ], sseources: [ 'local_file_system', 'url', 'फेसबुक', 'इंस्टाग्राम' ] } }, टूलबारबटटन: { 'मोरेरिच': { 'बटन': ['OpenFilePickerImageOnly', 'OpenFilePickervideoonly', 'OpenFilePicker', 'Insertlink', 'Inserttable', 'इमोटिकॉन्स', 'स्पेशलकार्टर्स', 'Inserthrth'], 'Buttonsvisible': 3 }, 'Moretext': { 'बटन': ['बोल्ड', 'इटैलिक', 'अंडरलाइन', 'फॉन्टफैमिली', 'फॉन्ट्सज़', 'टेक्स्टकोलर', 'बैकग्राउंडकोलर', 'क्लीयरफॉर्मेटिंग'] }, 'अधिक पैराग्राफ': { 'बटन': ['संरेखण', 'संरेखण', 'formatolsimple', 'alignright', 'alignjustify', 'formatol', 'formatul', 'पैराग्राफफॉर्मैट', 'पैराग्राफस्टाइल', 'लाइन हाइट', 'outent', 'indent', 'उद्धरण'] }, 'मोरमिस्क': { 'बटन': ['undo', 'redo', 'fullscreen', 'selectall', 'html', 'help'], 'संरेखित': 'सही', 'Buttonsvisible': 2 } }, घटनाओं: { 'FileStack.uploadedTofileStack': फ़ंक्शन (प्रतिक्रिया) { कंसोल.लॉग ("कॉलबैक को अपलोड करने के लिए फ़िल्डैक के लिए ट्रिगर किया गया है",),) }, 'FileStack.FilestackPickerOpened': फ़ंक्शन (प्रतिक्रिया) { कंसोल.लॉग ("कॉलबैक को पिकर के लिए ट्रिगर किया गया है",),) }, 'FileStack.FileStackPickerClosed': फ़ंक्शन (प्रतिक्रिया) { कंसोल.लॉग ("कॉलबैक को पिकर बंद के लिए ट्रिगर किया गया है",),) }, 'FileStack.uploadFailedTofileStack': फ़ंक्शन (प्रतिक्रिया) { कंसोल.लॉग (प्रतिक्रिया); }, }, ऊंचाई: 500, हाइटमैक्स: 1000 });

] FileStackOptions

संपत्ति में, हमने अपनी फ़िलस्टैक एपीआई कुंजी, एक बूलियन घोषित किया जो यह निर्धारित करता है कि क्या फाइलें विशेष रूप से फ़िल्टैक पर अपलोड की जाती हैं, और कुछ पिकर विकल्प। ये विकल्प अनुमत फ़ाइल प्रकार और स्रोतों को निर्धारित करते हैं। ] फ्रॉला और फिलस्टैक दोनों को स्थापित करने के बाद, हमने किया है! अब आप अपने एप्लिकेशन के भीतर छवि संपादन सुविधाओं के साथ एक उन्नत WYSIWYG संपादक का उपयोग कर सकते हैं। इसके अलावा, यहां बताया गया है कि संपादक को अब कैसे दिखाई देना चाहिए:

ध्यान दें कि संपादक ने अब बेहतर आकार कैसे दिया है। इससे भी महत्वपूर्ण बात यह है कि अब हमारे पास उनमें फ़िलस्टैक आइकन के साथ बटन हैं। ये बटन उपयोगकर्ताओं को FileStack के माध्यम से चित्र, वीडियो और अन्य फ़ाइलों को अपलोड करने की अनुमति देते हैं। अब, आपको कुछ फ़िल्टैक प्लगइन की क्षमताओं को दिखाने के लिए, कुछ छवि संपादन उपयोग के मामलों में गोता लगाएँ।
Wysiwyg संपादक के भीतर छवि संपादन के लिए मामलों का उपयोग करें

    
    
    

    
    
    
    



    




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



new FroalaEditor('#froala-editor');
 
 

] आपको फ्री-फॉर्म, सर्कल, स्क्वायर, और 16: 9 सहित विभिन्न क्रॉपिंग विकल्पों में से चुनना होगा, जिसका उपयोग हम यहां करते हैं। जब आप क्रॉपिंग कर रहे हों, तो चेक बटन पर क्लिक करें और "सहेजें" हिट करें। 



  
  
  
 फ़िल्टर लागू करना 




 फ़िल्टर छवियों को संभालने वाले प्रत्येक ऐप का एक महत्वपूर्ण हिस्सा बन गए हैं। फ़िलस्टैक और फ्रॉला के साथ, आप एक अपलोड की गई छवि के बगल में फ़िलस्टैक आइकन पर क्लिक करके और "फ़िल्टर" टैब पर जाकर इसे पूरा कर सकते हैं। वहां से, आप कई इमेज फिल्टर से चुन सकते हैं, जैसे कि पोलरॉइड, सेपिया, ग्रेस्केल, और बहुत कुछ। अब, हमारी फसली छवि के लिए एक फ़िल्टर लागू करें। 
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
});
 
 


  
  
  
 पाठ जोड़ना और बढ़ाना 



] फ्रॉला संपादक का उपयोग करते हुए, आप अलग -अलग फोंट और स्टाइल के साथ पाठ जोड़ सकते हैं। पहले से छवि का उपयोग करते हुए, कुछ पाठ जोड़ें और इसे बढ़ाएं। 


 
 



  
  
  
 एक सीमा सम्मिलित करना 


] आइए "बॉर्डर" टैब पर जाएं और हमारी छवि के लिए एक सीमा को अनुकूलित करें: 

  

 "सहेजें" पर क्लिक करने के बाद, हमें संपादक पर अपनी बढ़ी हुई छवि देखना चाहिए। वहां से, आप अपने फ़िलस्टैक डैशबोर्ड पर अपलोड की गई छवि की जांच कर सकते हैं। "कंटेंट ब्राउज़र" पर जाएं और आप हमारी छवि देखेंगे, जिसे आप अलग से या अपने एप्लिकेशन पर डाउनलोड कर सकते हैं। संदर्भ के लिए, यहां बताया गया है कि इन सभी कार्यों को करने के बाद छवि को कैसे देखना चाहिए: 


 
 


  
  
  
निष्कर्ष


 किसी भी आधुनिक आवेदन के लिए, छवि संपादन एक मूल्यवान उपकरण है। फ्रॉला जैसे उपकरणों के साथ, आप एक WYSIWYG संपादक के कार्यान्वयन को गति दे सकते हैं जिसमें शानदार छवि संपादन क्षमताएं हैं। इस तरह के उपकरण आपको फसल, ग्रंथों और फिल्टर जोड़ने, सीमाएं डालने और अपनी छवियों पर ओवरले लागू करने की अनुमति देते हैं। 

 इस गाइड का पालन करके, अब आप बहुत अधिक प्रयास के बिना ऐसी सुविधाओं को लागू करने के साथ शुरू कर सकते हैं। अब, आप एक चिकनी, सुखद छवि संपादन अनुभव प्रदान करने के लिए तैयार हैं जो उपयोगकर्ताओं को संपादक को छोड़ने के बिना उनकी छवियों को ठीक करने देता है। 


]