2013-11-15 12 views
5

मैं एक उल्का आवेदन में CKEditor उपयोग करने के लिए कोशिश कर रहा हूँ में CKEditor एकीकृत: मेरे attemps: सभी फाइलों के साथउल्का

  1. रखें CKEditor फ़ोल्डर (जे एस, सीएसएस, भाषा, प्लगइन्स और खाल) में सार्वजनिक फ़ोल्डर में, हेडर में जावास्क्रिप्ट फ़ाइल (ckeditor.js) का संदर्भ शामिल करें और textarea तत्वों में एप्रोपिएट क्लास का उपयोग करें। विफल क्योंकि संपादक केवल तभी काम करता है जब टेक्स्टरेरा शरीर में है (किसी भी टेम्पलेट में टेक्स्टरेरा नियंत्रण असम्बद्ध है)।

  2. क्लाइंट/lib/संगतता फ़ोल्डर और सार्वजनिक फ़ोल्डर में शेष फ़ाइलों में जावास्क्रिप्ट फ़ाइलें (ckeditor.js, config.js, style.js) रखें। इस बार आवेदन नहीं कर सकते फ़ाइलों का पता (खाल, प्लग इन, ...) क्योंकि स्थानीय होस्ट की तलाश में है: 3000/ग्राहक/lib/अनुकूलता/CKEditor/...

किसी को भी कर दिया है इस एकीकरण से पहले काम करता है ?

उत्तर

3

केवल क्लाइंट/lib, अर्थात क्लाइंट/lib/CKEditor में एक फ़ोल्डर के अंदर <head> में CKEditor फ़ाइलों को शामिल किया है होगा रखो। क्लाइंट को सेवा देने के लिए आपको बस इतना करना है: किसी भी <head> या उसके जैसा कुछ भी संदर्भित करने की आवश्यकता नहीं है। सभी .js और .css फ़ाइलें जो मेटीर क्लाइंट के अंदर पाती हैं स्वचालित रूप से संयोजित होती हैं और क्लाइंट को सेवा दी जाती हैं। यह किसी भी क्लाइंट-साइड लाइब्रेरी पर लागू होता है, न केवल सीकेएडिटर।

अगली चीज़ जो आपको करने की ज़रूरत है वह कारण है कि इसका उपयोग करने वाले पृष्ठों पर सीकेएडिटर को प्रारंभ किया जाए। मान लें कि संपादक की आईडी के साथ नाम संपादित करें। और कहें कि आप CKEditor jQuery Adapter भी लोड कर रहे हैं। ग्राहक भीतर JavaScript फ़ाइल के अंदर, रख:

Template.edit.rendered = function() { 
    $('#editor').ckeditor(); 
} 

कुंजी है कि यहाँ प्रारंभ, क्योंकि इस कोड टेम्पलेट पूरी तरह से है के बाद संपादित निष्पादित किया जाता है textareaसंपादक मौजूद है और तैयार है के बाद क्या होता है प्रदान की गई। इसे किसी भी समय संपादित किया जाएगा पुन: प्रस्तुत किया जाएगा। किसी भी अन्य क्लाइंट-साइड लाइब्रेरी को शामिल किया गया है और इसी तरह शुरू किया गया है।

EDIT .css के माध्यम से संदर्भित छवि फ़ाइलों को उल्का में दर्द होता है। उनके साथ सौदा करने का "उचित" तरीका उन सभी को सार्वजनिक के तहत रखना है, उदाहरण के लिए सार्वजनिक/सीकेडिटर। फिर CKEditor .css फ़ाइलों को संपादित करें ताकि छवि URL के सभी संदर्भ रूट पर आपके नए फ़ोल्डर को इंगित करें, यानी /ckeditor/image1.png आदि ("सार्वजनिक" छोड़ दें)।

+0

इस तरह लाइब्रेरी संपादक के आइकन नहीं ढूंढ पाती है और "rendered" funtion के अंदर संकेतित कॉल काम नहीं करता है। 'TypeError: ऑब्जेक्ट [ऑब्जेक्ट ऑब्जेक्ट] में कोई विधि नहीं है 'ckeditor'' –

+0

आइकन को ठीक करने के लिए, आपके पास कुछ विकल्प हैं: 1. सीडीएन के माध्यम से केवल CKEditor को लोड करना सबसे आसान है; http://cdnjs.com/libraries/ckeditor/ देखें। ऐसा करने के लिए, आप अपने index.html के ' 'में प्रासंगिक .js और .css फ़ाइलों को शामिल करें। 2. सबसे "उल्कात्मक" तरीका आइकन फ़ाइलों को/public/ckeditor या समान में स्थानांतरित करना होगा और "सीआरएडिटर की त्वचा की .css फ़ाइलों को" url (images/"से" url (/ public/ckeditor/" 3. अंततः आप सभी सीकेएडिटर को अंदर/सार्वजनिक रख सकते हैं और इसे सीधे अपने index.html के ' 'में कॉल कर सकते हैं, लेकिन यह सभी प्रदर्शन सुधारों को खो देता है। –

+0

क्यों' ckeditor() 'कॉल विफल रहता है, वहां हैं दस्तावेज़ों (इनलाइन, फ़्रेम किए गए, स्वचालित, इत्यादि) के प्रति सीकेईडिटर को प्रारंभ करने के कई तरीके। सबसे पहले जांचें कि आपने पृष्ठ को लोड करके कंसोलिटर जावास्क्रिप्ट को सही तरीके से कंसोल में जाकर 'CKEDITOR' टाइप किया है ताकि यह देखने के लिए कि वैश्विक चर परिभाषित किया गया है। यदि ऐसा नहीं है, तो ऊपर दिए गए मेरे निर्देशों का पालन करें। यदि ऐसा है, तो CKEditor दस्तावेज़ों में निर्देशों का पालन करें ताकि आप इसे वांछित तरीके से प्रारंभ कर सकें; मैंने jQuery विधि चुना है, जिसके लिए एडाप्टर लोड करना आवश्यक है (http: //docs.ckeditor.com/#!/guide/dev_jquery) –

11

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

adapters 
lang 
plugins 
skins 
ckeditor.js 
config.js 
contents.css 
styles.js 
तो जैसे

अपनी प्राथमिक लेआउट फ़ाइल संदर्भ CKeditor में:

<head> 
    <script type="text/javascript" src="/ckeditor/ckeditor.js"></script> 
    <script type="text/javascript" src="/ckeditor/adapters/jquery.js"></script> 
</head> 

अपने टेम्पलेट में

आपका सार्वजनिक फ़ोल्डर यह CKEditor नाम के एक निर्देशिका शामिल करना चाहिए निम्नलिखित फ़ाइलों और फ़ोल्डरों को शामिल होना चाहिए :

<template name="yourTemplate"> 
    <textarea id="content" name="content"></textarea> 
</template> 

अंत में, आपके अस्थायी रूप से प्रस्तुत समारोह में देर से:

Template.yourTemplate.rendered = function() { 
    $('#content').ckeditor(); 
}; 

आम तौर पर, आप this.$('#content').ckeditor() कहेंगे लेकिन वह काम नहीं करता क्योंकि CKeditor अपने सार्वजनिक फ़ोल्डर में है। नतीजतन, आपको #content तत्व के वैश्विक संदर्भ की आवश्यकता है।

+0

था nks! आपने मुझे कुछ समय बचाया इसने काम कर दिया – SsouLlesS