AngularJS में ckEditor को कैसे एकीकृत करें

शुभ दिन, प्रिय Khabrovites।

अब कई महीनों से मैं सक्रिय रूप से काम करने वाली परियोजनाओं में से एक में AngularJS का उपयोग कर रहा हूं। मैं "प्रशंसनीय गाने" नहीं गाऊंगा या इस ढांचे को नहीं बढ़ाऊंगा क्योंकि कोई आदर्श चीजें नहीं हैं (और यह शायद उन चीजों के साथ दुनिया में रहने के लिए बहुत उबाऊ होगा जो आपको अपनी "रचनात्मकता" के साथ अपनी कमियों को दूर करने में असमर्थ नहीं छोड़ते हैं)। मैं परिणामों के बारे में केवल कुछ शब्द कह सकता हूं: AngularJS की विचारधारा मेरे चेहरे में कोड को व्यवस्थित करने का बहुत अच्छा काम करती है और जादू उपकरण निर्देश देती है। वैसे, हाल ही में कॉर्नरजेएस के बारे में पहले से ही एक नोट था, जिसमें प्रौद्योगिकी केंद्र में निर्देश प्रदर्शित किए गए थे, और इस साल Google I / O पर कस्टम-एलिमेंट्स के लिए संभावित समर्थन के बारे में एक खबर थी (न केवल टैग, बल्कि पेज में जटिल एचटीएमएल घटक एम्बेडेड थे)।

विकास के अगले चरण में, एक उन्नत WYSIWYG संपादक के साथ एकीकरण के बारे में सवाल उठे और मेरी आँखें तुरंत ही ckEditor पर आ गईं , क्योंकि मैंने DotNetNuke पर आधारित परियोजनाओं के हिस्से के रूप में पहले ही कई बार इसका इस्तेमाल किया था और मेरे इंप्रेशन बहुत सकारात्मक थे (अच्छी तरह से, या इसे दूसरे तरीके से रखा: घटक में मजबूत खामियां नहीं मिला और एकीकरण में घंटों का समय लगा)।

एकीकरण जादू में मदद के लिए Google को कॉल करते हुए, मुझे स्टैकओवरफ्लो और अन्य निजी ब्लॉगों के लिए कई लिंक मिले, जहां पेस्टस्टैट घटना सभी समस्याओं का समाधान है और एक पूरे के रूप में निर्देश सरल और सुलभ दिखता है:

app.directive('ckEditor', [function () { return { require: '?ngModel', link: function ($scope, elm, attr, ngModel) { var ck = CKEDITOR.replace(elm[0]); ck.on('pasteState', function () { $scope.$apply(function () { ngModel.$setViewValue(ck.getData()); }); }); ngModel.$render = function (value) { ck.setData(ngModel.$modelValue); }; } }; }]); 

लेकिन अगले मेलस्टोन और तैनाती के बाद, ग्राहक ने यह देखना शुरू कर दिया कि कभी-कभी संपादित पाठ पूरी तरह से सहेजा नहीं जाता है या घटक इंटरनेट एक्सेसप्लनर (<9) के पुराने संस्करणों के मामले में एक्सेस उल्लंघन के साथ पूरी तरह से क्रैश हो जाता है। समस्या का पुनरुत्पादन किया गया था, आदर्श परिस्थितियां प्राप्त की गई थीं, और मैं समस्या का समाधान खोजने गया था।

दस्तावेज को फिर से पढ़ने और सामान्य तस्वीर के लिए पृष्ठ को पोक करने के बाद, मैं इस निष्कर्ष पर पहुंचा कि यह घटना कीबोर्ड के साथ ठीक काम करती है, लेकिन किट में शामिल प्लग-इन से तत्वों के सम्मिलन (यह पाठ, चित्र आदि) को पूरी तरह से अनदेखा कर देती है। यह तुरंत एक नई घटना की तलाश करने का निर्णय लिया गया जो प्रकृति में अधिक वैश्विक है। लेकिन खोज परिणाम इस "गैर-रूढ़िवादी" विधि के लिए नेतृत्व किया, जो, इसके अलावा, एक प्लग-इन भी है (और यह माइग्रेशन या स्वयं ckEditor के अपडेट से भरा है)। इसलिए, संपादक संस्करण को नवीनतम उपलब्ध (उस समय CKEditor 4.2.1), स्थिरता को जोखिम में डालना और देशी एपीआई के स्तर पर एक जादू परिवर्तन घटना प्राप्त करने का निर्णय लिया गया था (हो सकता है कि उन्होंने सिर्फ कर्नेल में पूर्वोक्त प्लग-इन को एकीकृत किया हो, मैंने ईमानदारी से इतिहास का पालन नहीं किया है)। परिवर्तन के साथ घटना को बदलने से परिवर्तित सामग्री को सहेजने के मुद्दे को हल करने में मदद मिली, लेकिन एक्सेस उल्लंघन के साथ समस्या का समाधान नहीं हुआ।

IE <9 (IE के लिए पॉपअप विंडो के कड़वे अनुभव द्वारा सिखाया गया है (कुकीज़, आदि के एक पूर्ण रीसेट के साथ अलग-अलग थ्रेड्स को निष्पादित करता है), मैं इस नतीजे पर पहुंचा कि समस्या iframe घटक में है और इसे ckEditor के अंदर स्वयं बनाने और एक्सेस करने का क्रम है। साथ ही AngularJS के भीतर जीवन चक्र भी। समस्या यह है कि CKEDITOR.replace (...) विधि पुराने IEs में अनियंत्रित रूप से चलती है और निष्पादन के संदर्भ के "जाने देना" AngularJS मॉडल को बांधने और सेटडेटा को कॉल करने की कोशिश करता है, जो अभी भी तैयार iframe का उपयोग करने की कोशिश करता है, जो एक्सेस उल्लंघन का कारण बनता है। मैंने कतार से "बेहतर" या "अधिक विश्वसनीय" कुछ भी आविष्कार नहीं किया, इसलिए इसका परिणाम निम्न निर्देश कोड था:

 app.directive('ckEditor', [function () { return { require: '?ngModel', restrict: 'C', link: function (scope, elm, attr, model) { var isReady = false; var data = []; var ck = CKEDITOR.replace(elm[0]); function setData() { if (!data.length) { return; } var d = data.splice(0, 1); ck.setData(d[0] || '<span></span>', function () { setData(); isReady = true; }); } ck.on('instanceReady', function (e) { if (model) { setData(); } }); elm.bind('$destroy', function () { ck.destroy(false); }); if (model) { ck.on('change', function () { scope.$apply(function () { var data = ck.getData(); if (data == '<span></span>') { data = null; } model.$setViewValue(data); }); }); model.$render = function (value) { if (model.$viewValue === undefined) { model.$setViewValue(null); model.$viewValue = null; } data.push(model.$viewValue); if (isReady) { isReady = false; setData(); } }; } } }; }]); 

मॉडल की कतार और मूल्यों से संबंधित कोड में अस्पष्ट क्षण हैं। $ ViewValue (विशेष रूप से, ये मॉडल संवादों में एक घटक के लुप्त होने से निपटने का प्रयास कर रहे थे, जिसे ट्विटर बूटस्ट्रैप मॉडर्न घटक पैच द्वारा हल किया गया था, लेकिन यह एक और कहानी है)।

साथ ही, मैंने सेटडेटा (..., कॉलबैक) से जुड़े क्षणों का पूरी तरह से खुलासा नहीं किया, जो वास्तव में सिंक्रोनाइज़ करने वाले तंत्रों में से एक है, लेकिन, ऐसा मुझे लगता है, कोड इस संदर्भ में जानकारीपूर्ण लगता है और शब्दों को बदल देता है।

मैं एक बार फिर इस दृष्टिकोण के बारे में सुझाव और आलोचना सुनूंगा।

पुनश्च
मुझे जो कुछ मिला है उसका एक कार्यशील उदाहरण है http://jsfiddle.net/jWANb/2/
इंटरनेट पर क्या सलाह दी जाती है उसका एक कार्यशील उदाहरण http://jsfiddle.net/fvApg/1/

दूसरे उदाहरण में एक चित्र सम्मिलित करने का प्रयास करें और "परिणाम html" देखें। यह देखा जाएगा कि संदर्भ नहीं बदला है।