CKEditor API
CKEditor API Drupal 8 में नया है।
ध्यान दें, यह केवल Drupal 8 CKEditor मॉड्यूल API पर लागू होता है, CKEditor JavaScript लाइब्रेरी API पर नहीं — उसके लिए देखें http://docs.ckeditor.com/.
इस मॉड्यूल के काम करने के तरीके पर अधिक जानकारी के लिए देखें Text Editor मॉड्यूल दस्तावेज़.
API की विशेषताएँ
सबसे कम उपयोग किए जाने वाले API से क्रमबद्ध:
CKEditor skins
Drupal 8 CKEditor डिफ़ॉल्ट रूप से Moono स्किन का उपयोग करता है। यह अधिकांश साइटों के लिए अच्छा है क्योंकि यह काफी न्यूट्रल स्किन है। हालांकि, कुछ साइटें परफ़ेक्ट इंटेग्रेशन चाहती हैं, और उस स्थिति में आप कोई और स्किन इंस्टॉल कर सकते हैं — यहाँ तक कि वह जिसे आप स्वयं बनाएँ।
इसके लिए hook_editor_js_settings_alter() लागू करें:
function hook_editor_js_settings_alter(array &$settings) {
foreach (array_keys($settings['editor']['formats']) as $text_format_id) {
if ($settings['editor']['formats'][$text_format_id]['editor'] === 'ckeditor') {
$settings['editor']['formats'][$text_format_id]['editorSettings']['skin'] = 'SKIN_NAME,ABSOLUTE_URL_TO_SKIN';
}
}
}
CKEditor iframe CSS
CSS जो CKEditor iframe इंस्टेंस में लोड होता है, जैसे /node/add/article पर, उसे कस्टमाइज़ करने की आवश्यकता हो सकती है ताकि iframe CKEditor इंस्टेंस फ्रंट-एंड स्टाइल से मेल खाएँ (WYSIWYG पसंद करने वालों के लिए) या स्ट्रक्चर दिखाएँ (टेक्स्ट एडिटिंग पसंद करने वालों के लिए)।
- फ्रंट-एंड थीम CSS
लगभग हर थीम में पैराग्राफ, blockquotes, इमेज कैप्शन आदि को स्टाइल करने के लिए CSS होता है। इसलिए हर थीम को अपने *.info.yml फ़ाइल में ckeditor_stylesheets की key का उपयोग कर CKEditor iframe इंस्टेंस में यह CSS लोड करने को बताना चाहिए। Bartik में उदाहरण देखें. साथ ही यह गाइड देखें "The WYSIWYG is a lie".
- मॉड्यूल CSS
मॉड्यूल जो फ्रंट-एंड में CSS लोड करते हैं, वे hook_ckeditor_css_alter() का उपयोग करके वही CSS CKEditor iframe इंस्टेंस में लोड कर सकते हैं।
CKEditor Plugins
CKEditor में और अधिक कार्यक्षमता जोड़ें!
\Drupal\ckeditor\CKEditorPluginInterface: Drupal plugins, जो CKEditor plugins से 1:1 मैप होते हैं ताकि Drupal को पता हो कि कौन से CKEditor plugins उपलब्ध हैं। इसलिए नाम थोड़ा उलझा हुआ लग सकता है: CKEditor Plugin Plugins।
- चार अतिरिक्त इंटरफ़ेस भी हैं जिन्हें आप लागू कर सकते हैं:
- \Drupal\ckeditor\CKEditorPluginButtonsInterface प्लगइन को बताने देता है कि वह कौन-सी बटन देता है, ताकि यूज़र CKEditor टूलबार को ड्रैग-एंड-ड्रॉप इंटरफ़ेस से कॉन्फ़िगर कर सकें।
उदाहरण: \Drupal\ckeditor\Plugin\CKEditorPlugin\StylesCombo। - \Drupal\ckeditor\CKEditorPluginContextualInterface प्लगइन को कॉन्टेक्स्ट के आधार पर ऑटो-एनेबल करता है।
उदाहरण: \Drupal\ckeditor\Plugin\CKEditorPlugin\DrupalImageCaption। - \Drupal\ckeditor\CKEditorPluginConfigurableInterface प्लगइन को सेटिंग्स फॉर्म देने देता है।
उदाहरण: StylesCombo। - \Drupal\ckeditor\CKEditorPluginCssInterface (8.1.0 से) प्लगइन को अतिरिक्त CSS परिभाषित करने देता है।
प्लगइन implementations को @CKEditorPlugin annotation के साथ annotate किया जाना चाहिए।
// PHP में annotation का id वही होना चाहिए जो यहाँ परिभाषित है।
CKEDITOR.plugins.add('pluginId', { ... });
- hook_ckeditor_plugin_info_alter() से प्लगइन metadata बदला जा सकता है।
- \Drupal\ckeditor\CKEditorPluginBase डिफ़ॉल्ट implementation प्रदान करता है ताकि हर method implement न करना पड़े।
अंत में: नया प्लगइन बनाते समय उसके configuration UX पर भी ध्यान दें। ckeditor.drupalimage.admin.js और ckeditor.stylescombo.admin.js देखें।
Debugging
Drupal 8 CKEditor की एक कस्टम ऑप्टिमाइज़्ड build शामिल करता है। देखें core/assets/vendor/ckeditor/build-config.js। यहाँ documentation बताती है कि production build को development build से कैसे बदलें।