WYSIWYG मॉड्यूल के साथ कस्टम ckeditor.styles.js फ़ाइल

Question

मैं WYSIWYG मॉड्यूल के माध्यम से CKeditor में "फ़ॉन्ट शैली" ड्रॉपडाउन को अनुकूलित करने की कोशिश कर रहा हूं, लेकिन मुझे wysiwyg मॉड्यूल के प्रोफ़ाइल संपादक में ckeditor.styles.js के लिए एक पथ निर्दिष्ट करने का कोई रास्ता नहीं दिखाई दे रहा है।

इस जानकारी के लिए इस पोस्ट को देखें - यह कहता है कि उस फ़ाइल के लिए कोई स्थान निर्दिष्ट करने का कोई तरीका होना चाहिए।

Answer 1

ड्रुपल wyswiwyg मॉड्यूल का उपयोग करके कस्टम ckeditor स्टाइलसेट को जोड़ने के लिए ये 2 तरीके हैं (निश्चित रूप से अधिक हैं)।

1. योगदान मॉड्यूल Ckeditor शैलियाँ का उपयोग करना
2. निम्नानुसार हुक_wysiwyg_editor_settings_alter का उपयोग करना :

(कोड "ckeditor_styles मॉड्यूल द्वारा प्रेरित")

एक कस्टम मॉड्यूल में हुक_wysiwyg_editor_settings_alter कार्यान्वयन जोड़ें:

/**
 * Implements hook_wysiwyg_editor_settings_alter().
 *
 * @param type $settings
 * @param type $context
 */
function MYCUSTOMMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
  // We only add the settings to ckeditor wysiwyg profiles.
  if ($context['profile']->editor == 'ckeditor') {
    $format = $context['profile']->format;
    $path = drupal_get_path('module', 'MYCUSTOMMODULE') . '/js';
    $settings['stylesSet'] = "mycustomstyleset:/$path/ckeditor_styles.js";
  }
}

और कस्टम मॉड्यूल के एक उप निर्देशिका js में ckeditor_styles.js नामक एक फ़ाइल जोड़ें:

CKEDITOR.stylesSet.add('mycustomstyleset',
  [
    { name : 'Red', element : 'span', styles : {'color' : 'red' } },
    { name : 'CSS Style', element : 'span', attributes: { 'class' : 'my_style' } },
    { name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } },
    { name : 'Heading 4' , element : 'h4' },
    { name : 'Blue Button', element : 'div', attributes : { 'class' : 'blue-button' } },
  ]);

Comments

मैं वास्तव में यही काम करना चाहता था। मुझे यहाँ इस्तेमाल की जाने वाली स्टाइलसैट फ़ाइल के सापेक्ष पथ के बजाय एक पूर्ण पथ का उपयोग करना था, वरना वैश्याग गायब हो जाता। फिर भी, स्टाइल्स ड्रॉपडाउन तब अक्षम था, और मैं इस कारण का पता नहीं लगा सका।

— डिजिटोफर

वैश्विक $ base_url को न भूलें: mycustomstyleset:$base_url/$path/ckeditor_styles.js

— आम

@commonpike की आपको जरूरत नहीं है$base_url

— फेलिक्स ईव

Answer 2

मैं अपने Drupal साइटों के लिए हर समय ऐसा करता हूं! @ मार्बलग्रेवी का जवाब एक पहला कदम है, लेकिन आप यह भी कर सकते हैं कि आप अपने CKEditor को एक संबंधित सीएसएस नियम जोड़ना जैसी चीजें करना चाहते हैं, ताकि जब आपका संपादक आपके किसी कस्टम स्टाइल को लागू कर रहा हो, तो संपादक वास्तव में उन्हें लागू करता है और संपादक पूर्वावलोकन कर सकता है परिवर्तन, बचाने के लिए बिना!

मैंने हाल ही में यहाँ सभी चलते हिस्सों के बारे में एक बहुत ही विस्तृत ब्लॉग पोस्ट लिखा है: http://drupalwoo.com/content/how-customize-ckeditor-drupal-7-site

मैं ट्यूटोरियल में क्या कवर करता हूं

1. टूलबार को कैसे कस्टमाइज़ करें

2. कस्टम ckeditor.styles.js फ़ाइल बनाना। यहाँ एक नमूना है:

    CKEDITOR.addStylesSet( 'drupal',
    [
    /* Block Styles */
    { name : 'Heading 2'        , element : 'h2' },
    { name : 'Heading 3'        , element : 'h3' },
    { name : 'Heading 4'        , element : 'h4' },
    { name : 'Paragraph'        , element : 'p' },
    { name : 'Blue Image Button',
    element : 'div',
    attributes : {
    'class' : 'blue-image-button' }
    },
   
    /* Inline Styles */
    { name : 'Inline Quotation'    , element : 'q' },
     ...

3. अपने CKEditor को कॉन्फ़िगर करना ताकि यह पता चले कि इस कस्टम स्टाइल फ़ाइल को कहाँ खोजना है

4. इन शैलियों के अनुरूप सीएसएस को लागू करना, और CKEditor को इन के बारे में भी बताना!

5. एक संपादक के रूप में सेटअप का उपयोग कैसे करें!

आशा है कि यह उपयोगी है! हमें बताएं कि क्या आपको यह काम मिल रहा है!

Comments

आप चरण 3 कहां से करते हैं, जिससे CKEditor को कस्टम ckeditor.styles.js फ़ाइल के बारे में पता चलता है।

— बतंदवा

यह उत्तर सही नहीं है। सवाल यह है कि ड्रुपल वेसिवग मॉड्यूल का उपयोग करके इसे कैसे हल किया जाए लेकिन लेखक बताते हैं कि ड्रुपल केकेडीटर मॉड्यूल का उपयोग करके इसे कैसे हल किया जाए। दो अलग बातें। Wysiwyg मॉड्यूल में अतिरिक्त custom.styles.js फ़ाइलों को जोड़ने का कोई विकल्प नहीं है

— बैटगोलिक्स

Answer 3

मैंने अभी एक छोटा कस्टम मॉड्यूल लिखा है। मैं Wysiwyg मॉड्यूल (CKEditor मॉड्यूल के बजाय) का उपयोग कर रहा हूं। यह तो मेरे विषय में ckeditor.styles.js से शैलियों को लोड करने में सक्षम बनाता है।

/**
 * Implements hook_wysiwyg_editor_settings_alter().
 */
function MYMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
  if ($context['profile']->editor == 'ckeditor') {
    $path = drupal_get_path('theme', 'THEMENAME');
    $settings['stylesSet'] = "drupal:/$path/ckeditor.styles.js";
  }
}

Comments

इसका जवाब होना चाहिए !!!

— एलेक्स गिल

Answer 4

आप WYSIWYG प्रोफ़ाइल सेटिंग्स (व्यवस्थापक / कॉन्फ़िगरेशन / सामग्री / wysiwyg, इच्छित प्रोफ़ाइल संपादित करें) में शैलियों को परिभाषित कर सकते हैं।

"सीएसएस" टैब> "सीएसएस कक्षाएं"

वैकल्पिक रूप से "फ़ॉन्ट शैली" ड्रॉपडाउन सूची के लिए सीएसएस कक्षाओं को परिभाषित करें।

प्रारूप में प्रत्येक पंक्ति पर एक कक्षा दर्ज करें: [लेबल] = [तत्व]। [वर्ग]। उदाहरण: शीर्षक = h1.title

यदि खाली छोड़ दिया जाता है, तो सीएसएस कक्षाएं स्वचालित रूप से भरी हुई स्टाइलशीट (ओं) से आयात की जाती हैं। आंतरिक रूप से स्टाइलसेट सेट का उपयोग करता है ।

Answer 5

बस अपने ओवरराइड डाल ckeditor.styles.js अपने विषय के रूट में फ़ाइल है, तो के लिए जाना / व्यवस्थापक / config / सामग्री / CKEditor / संपादित करें / है, तो अपने प्रोफाइल, से प्रत्येक के लिए संपादित करें उन्हें और खुल सीएसएस fieldset, लगता है पूर्वनिर्धारित शैलियाँ क्षेत्र और उपयोग थीम ckeditor.styles.js चुनें ।

* पूर्वनिर्धारित शैली * क्षेत्र की मदद से:

Ckeditor.styles.js फ़ाइल के स्थान को परिभाषित करें। यह डिफ़ॉल्ट टूलबार में उपलब्ध स्टाइल ड्रॉप-डाउन सूची द्वारा उपयोग किया जाता है। साइटों / सभी / मॉड्यूल / कंट्रीब्यूट / ckeditor / ckeditor.styles.js फ़ाइल को अपनी थीम निर्देशिका (थीम / सात / ckeditor.styles.js) में कॉपी करें और इसे अपनी आवश्यकताओं के अनुसार समायोजित करें।

Comments

यह उत्तर CKEDitor मॉड्यूल के उपयोग को भी मानता है, जो कि सवाल यह नहीं था कि

— बैटिगॉलिक्स