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

चाबी छीनना

• आप WYSIWYG HTML संपादकों में नई सुविधाएं जोड़ सकते हैं

• कस्टम बटन उपयोगकर्ताओं को सामग्री को आसानी से प्रारूपित करने में मदद करते हैं

• संपादक का रूप बदलना आपकी साइट की शैली से मेल खा सकता है

WYSIWYG HTML संपादकों को क्यों बदलें?

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'
});

यह परिवर्तन कई चीजें करता है:

• यह विभिन्न स्क्रीन आकारों के लिए बटन सेट करता है

• यह दिखाने के लिए कुछ टेक्स्ट जोड़ता है कि कहां टाइप करना है

• यह कैरेक्टर काउंटर को बंद कर देता है

• यह टूलबार को पृष्ठ के साथ गतिशील बनाता है

• यह एक पूर्व-निर्मित थीम का उपयोग करता है

WYSIWYG HTML संपादकों को बदलने के लिए युक्तियाँ

जब आप इन संपादकों को बदलते हैं, तो इन युक्तियों को ध्यान में रखें:

1. छोटी शुरुआत करें: बड़े बदलाव करने से पहले छोटे बदलाव करें।

2. वहां जो है उसका उपयोग करें: जब संभव हो तो संपादक के अंतर्निहित टूल का उपयोग करें।

3. बहुत परीक्षण करें: सुनिश्चित करें कि आपके परिवर्तन विभिन्न ब्राउज़रों में काम करते हैं।

4. स्पीड के बारे में सोचें: बड़े बदलाव से चीजें धीमी हो सकती हैं, इसलिए ढेर सारी सामग्री के साथ परीक्षण करें।

5. अद्यतित रहें: नई सुविधाओं की जांच करें जो आपकी मदद कर सकती हैं।

विभिन्न फ़्रेमवर्क में परिवर्तित संपादकों का उपयोग करना

आप इन परिवर्तित संपादकों का उपयोग कई वेब फ्रेमवर्क में कर सकते हैं। यहां बताया गया है कि आप रिएक्ट में हमारे परिवर्तित संपादक का उपयोग कैसे कर सकते हैं:

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;

यह रिएक्ट घटक हमारे परिवर्तित संपादक को लपेटता है, जिससे आपके रिएक्ट ऐप में इसका उपयोग करना आसान हो जाता है।

ऊपर लपेटकर

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

याद रखें, लक्ष्य यह है कि संपादक आपके लिए बिल्कुल सही काम करे। कुछ चतुर बदलावों के साथ, आप एक अच्छे संपादक को एक बेहतरीन संपादक में बदल सकते हैं जो आपके काम में आसानी से फिट बैठता है।

तो, आगे बढ़ें और इसे आज़माएँ! अपना WYSIWYG HTML संपादक बदलें और देखें कि यह आपके उपयोगकर्ताओं के लिए कितना बेहतर हो सकता है।

यह पोस्ट शुरुआत में फ्रोआला के ब्लॉग पर प्रकाशित हुई थी।