अपने पृष्ठ पर एक सेक्सी संपादक एम्बेड करें

मैं अग्रिम में माफी माँगता हूँ अगर यह पोस्ट आपको उबाऊ और अटूट लग रही थी)



अपने प्रोजेक्ट के विकास के दौरान, उन्हें एक संदेश संपादक को एम्बेड करने के कार्य के साथ सामना करना पड़ा। मैं कुछ बहुत ही सुखद, हल्का और एक ही समय में काफी कार्यात्मक चाहता था। ताकि चित्रों को बफर से डाला जा सके और अंतिम क्रियाओं को पूर्ववत किया जा सके, ठीक है, फोंट के साथ काम करने के लिए सभी प्रकार के बुनियादी कार्य।



और फिर मेरी नजर पुस्तकालय के साथ आपूर्ति किए गए संपादक पर पड़ी

DojoToolkit







चूंकि इस लाइब्रेरी के बारे में RuNet में यह स्पष्ट रूप से लिखा गया है, इसलिए मैं अपना अनुभव साझा करना चाहता था)



मैं तुरंत एक आरक्षण करूँगा कि मुझे js पर कोई प्रोग्रामिंग अनुभव नहीं है, इसलिए, शायद यह पोस्ट उन्हीं लोगों के लिए दिलचस्प होगी जैसे मैं dummies) जो "लड़ाई और खोज, खोज और छुपाने" के सिद्धांत से जीते हैं



इसलिए, लाइब्रेरी को एम्बेड करने के लिए, आपको कई चरण करने होंगे:

1. डाउनलोड और तैनात)
2. प्रारंभिक स्क्रिप्ट
3. स्वयं प्रपत्र में जोड़ें

बिंदु 1 पर - आकार तुरंत डरावना है, पुस्तकालय के साथ-साथ फ़ोल्डर के चारों ओर बेतरतीब ढंग से बिखरे हुए उदाहरणों का एक गुच्छा है, लेकिन शुरुआत के लिए यह बस ऐसा ही करेगा। बस पूरे फ़ोल्डर को अनपैक करें, हम यह पता लगाएंगे कि हमें क्या चाहिए - बाद में।



2. आरंभीकरण के साथ भी कोई समस्या नहीं थी, हेडर क्षेत्र में बस कुछ पंक्तियों को जोड़ते हुए, उचित पथ लिखते हुए:













3. वास्तव में संपादक को एम्बेड करें

इसलिए यह लाइब्रेरी अंदर से बाहर से सेक्सी है, इसलिए यह कनेक्शन में आसानी है।

यह div की शैली में textarea संलग्न करने और dojoType सेट करने के लिए पर्याप्त है .. पैरामीटर:



". htmlspecialchars(($doc['body'])) ."







हो गया। यह ओनलीक .. फास्ट करने के लिए घटना प्रस्तुत करने के लिए बनी हुई है:

<input type=submit onclick='console.log(dijit.byId('body').getValue().length)' value='". $lang['submit'] ."' style='width:100%'>







और सब?

वास्तव में नहीं) अब सबसे दिलचस्प बात यह है कि ग्लिट्स को पकड़ना है)

सौभाग्य से, उनमें से बहुत से नहीं हैं) पहला बग ऑनसुमिट पर घटना के गलत प्रसंस्करण से जुड़ा हुआ है (सौभाग्य से, Google ने इस सवाल का जवाब दिया, लेकिन दुर्भाग्य से मैं इसे फिर से नहीं पा सका) इसलिए, मैं पोस्ट के अंत में केवल सही फ़ाइल संलग्न करूंगा।

और दूसरा, सामान्य रूप से काफी बग नहीं, लेकिन पाठ को पार्स करते समय, कुछ वर्णों को उनके HTML कोड के साथ बदल दिया जाता है। उदाहरण के लिए, यूट्यूब से वीडियो के लिंक को डालते समय सामान्य तौर पर क्या हस्तक्षेप होता है।

यह काफी सरल तरीके से तय किया गया है, बस लाइन पर टिप्पणी करें:

//str = str.replace(/&/gm, "&").replace(/</gm, "<").replace(/>/gm, ">").replace(/"/gm, """);





RichText.js लाइब्रेरी में एक्सीएक्सएक्सएमएल फ़ंक्शन में



खैर, आखिरी, डायरेक्टरी में पड़ी फाइलों की संख्या को कम करने के लिए, केवल आवश्यक पुस्तकालयों को फायरबग के माध्यम से चुना जा सकता है।



इस तरह से तैयार किए गए पुस्तकालयों को मैंने यहां पोस्ट किया है

परिणामस्वरूप , हमें अपेक्षाकृत छोटा (लगभग 200 केबी) और काफी सेक्सी संपादक मिला।



यह कुछ इस तरह दिखता है:





और व्यापार में संपादक को प्रहार करें

इस साइट पर संभव है



ओह, मैं एक पल के लिए पूरी तरह से भूल गया। ताकि वे लिंक जो उपयोगकर्ता बफ़र के माध्यम से नहीं बल्कि मैन्युअल रूप से डालें (http: //, बिना किसी hrefs के) - आप इस तरह से कुछ सरल प्रसंस्करण सम्मिलित कर सकते हैं:

function url_process($text) {

if ( strstr($text,"\"http")){

return $text;

} else{

$text = preg_replace ('/http:\/\/([^",)<>\s]*)/', "\\1", $text);

}

return $text;

}









युपीडी



टिप्पणियों में, स्टार्क ने एक अन्य संपादक का सुझाव भी दिया: nicedit Just 30! केबी



परिणामस्वरूप, मैंने इसे अपनी वेबसाइट पर dojo से आइकन संलग्न करके एम्बेड किया है)



यहां आइकॉन अलग से डाउनलोड किए जा सकते हैं।