CKEditor 3.6.3, prettyPhoto और AjexFileManager का संयोजन

दिन का अच्छा समय!

CKEditor 3.6.3 - साइट में निर्मित विज़ुअल एडिटर का उपयोग करना, विभिन्न सूचनाओं को जोड़ना और संपादित करना बहुत आसान और सुविधाजनक है। उदाहरण के लिए, इसका उपयोग टिप्पणियों या समाचार ब्लॉक को जोड़ने के रूप में किया जा सकता है, व्यवस्थापक अनुभाग में इसके उपयोग का उल्लेख नहीं करने के लिए।

सुंदर फोटो - सुंदर फोटो गैलरी।

AjexFileManager - फ़ाइल प्रबंधक। हमारे मामले में, वह चित्रों को लोड करेगा।

साइटों में से एक बनाते समय, मुझे निम्नलिखित समस्या का सामना करना पड़ा: मुझे व्यवस्थापक पैनल में एक पाठ संपादक स्थापित करना पड़ा, जिसमें गैलरी गैलरी बनाने की क्षमता थी। इंटरनेट पर इस तरह के संयोजन की खोज करने के बाद, मुझे "CKEditor 3.0.1 + lightbox" मिला। CKEditor संस्करण पुराने और लाइटबॉक्स को बहुत सुंदर रूप में नहीं ढूंढ रहा है। मैंने अपनी विधानसभा बनाने का फैसला किया।

CKEditor 3.6.3 और prettyPhoto का संयोजन

आरंभ करने के लिए, लेखों को पढ़ने और यह पता लगाने के बाद कि CKEditor को कहाँ संपादित करना है, गैलरी के "सोल्डरिंग" के लिए कोड जोड़ने के लिए, मैंने पथ के साथ स्थित फ़ाइल "image.js" का संपादन शुरू किया: "ckedit" प्लगइन्स \ image \ Dials \ image.js "।
लेकिन यह फ़ाइल संपीड़ित है, इसलिए हमें इसे "\ ckeditor \ _source \ plugins \ छवि \ संवाद" फ़ोल्डर में स्थित एक असंपीड़ित फ़ाइल के साथ बदलने की आवश्यकता है।
CKEditor 3.0.1 और लाइटबॉक्स के बीच संबंध का ज्ञान होने के बाद, मुझे स्क्रिप्ट को संपादित करने के लिए एक जगह की तलाश में अधिक समय नहीं लगा।
"}" के बाद "} लाइन में आपको कोड जोड़ना होगा:
,{
id:'cmbARFGallery',
type:'select',
label:editor.lang.ARFgallery.title,'default':'',
items:[
[editor.lang.common.notSet,''],
[editor.lang.ARFgallery.prettyPhoto1,'prettyPhoto[gallery1]'],
[editor.lang.ARFgallery.prettyPhoto2,'prettyPhoto[gallery2]'],
[editor.lang.ARFgallery.prettyPhoto3,'prettyPhoto[gallery3]'],
[editor.lang.ARFgallery.prettyPhotoOne,'prettyPhoto'],
],
setup:function(type,element) {
if(type==LINK) this.setValue(element.getAttribute('rel')||'')
},
commit:function(type,element) {
if(type==LINK){
if(this.getValue()||this.isChanged()) {
element.setAttribute('rel',this.getValue());
element.setAttribute('class','imgPrettyPhoto');
}
}
}
}


कोड जोड़ने के बाद, हमें इसके लिए प्रत्येक टैग को एक नाम देने की आवश्यकता है; हम फिल्म "ru" (\ func \ ckeditor \ lang \) को संपादित करते हैं।
नवीनतम वर्ण बदलें
'}};

पर

'},ARFgallery:{title:' ',prettyPhoto1:'prettyPhoto 1',prettyPhoto2:'prettyPhoto 2',prettyPhoto3:'prettyPhoto 3',prettyPhotoOne:'prettyPhoto One'}};

इस प्रकार, मुझे यह रचना मिली:

CKEditor 3.6.3, prettyPhoto और AjexFileManager का उपयोग करना

यह सबसे सरल हिस्सा है, जो एक साधारण योजना के अनुसार किया जाता है।
1. स्क्रिप्ट डाउनलोड करें। लोड करने की आवश्यकता:
< type="text/javascript" src="/ckeditor/ckeditor.js"></>
< type="text/javascript" src="/AjexFileManager/ajex.js"></>

2. पाठ के बाद हम जोड़ते हैं:
< type="text/javascript">
var editor = CKEDITOR.replace('ID textarea');
AjexFileManager.init({returnTo: 'ckeditor', editor: editor});
</>

@ लिपि = लिपि

3. सहेजें और उपयोग करें।
परिणाम यह किट है:

युक्तियाँ और स्पष्टीकरण

9. "सुंदर फोटो [गैलरी 1]", "सुंदर फोटो [गैलरी 2]", "सुंदर फोटो [गैलरी 3]" - स्लाइड्स की तीन श्रृंखला
2. यदि आपको अधिक आवश्यकता है, तो इस सूची को सादृश्य द्वारा जोड़ें।
[editor.lang.ARFgallery.prettyPhoto1,'prettyPhoto[gallery1]'],
[editor.lang.ARFgallery.prettyPhoto2,'prettyPhoto[gallery2]'],
[editor.lang.ARFgallery.prettyPhoto3,'prettyPhoto[gallery3]'],
3. मैं आपको सलाह देता हूं कि आप चर को न बदलें, क्योंकि कोई भी कार्य करना बंद कर सकता है। चरों के कारण, "टेबल्स" और "iFrame" मेरे लिए काम नहीं कर पाए

पुनश्च
CKEditor 3.6.3 और AjexFileManager यहां से डाउनलोड करें narod.ru/disk/51807053001.a4afef46f820a00413d95807fa399293/func.rar.html
prettyPhoto - अंतिम में से कोई भी

पी पी एस
आप यहाँ देख सकते हैं और arfiles.ru/habrahabr खेल सकते हैं