HTML कक्षाओं को अलग करने से WYSIWYG + CKEditor को रोकें

Question

मैं CKditor के साथ WYSIWYG संपादक का उपयोग कर रहा हूं। मुझे लग रहा है कि "स्रोत" दृश्य से मेरे तत्वों में कस्टम कक्षाएं जोड़ते समय, CKEditor स्रोत दृश्य से बाहर निकलते समय उन कक्षाओं को हटा देता है।

जब इसके समाधान के लिए googling, मुझे CKEditor मॉड्यूल पृष्ठ मिला, जो बताता है कि अकेले CKEditor का उपयोग करते समय इसे कैसे ठीक किया जाए। (मूल रूप से, हमें config.allowedContent = trueइसकी उन्नत सामग्री फ़िल्टर सेटिंग में JS config सेट करने की आवश्यकता है )।

हालाँकि, WYSIWYG के माध्यम से CKEditor का उपयोग करते समय, ये सेटिंग्स व्यवस्थापक इंटरफ़ेस में उजागर नहीं होती हैं। WYSIWYG के माध्यम से CKEditor का उपयोग करते समय आप इसे कैसे प्राप्त करते हैं?

पुनश्च: मैं अकेले CKEditor का उपयोग नहीं कर सकता क्योंकि यह मीडिया प्लगइन के साथ एकीकृत नहीं है ।

Comments

आपने अपने लाइब्रेरी फ़ोल्डर में CKEditor संस्करण क्या डाउनलोड किया?

— बीबी

संस्करण का उपयोग कर 4.2

— jrharshath

Answer 1

CKEditor का आप किस संस्करण का उपयोग कर रहे हैं? CKEditor 4.1+ के साथ एक समस्या है, जिसमें स्वचालित सामग्री फ़िल्टर (ACF) नामक एक सुविधा है जो स्वचालित रूप से संपादक के लिए परिभाषित नहीं विशेषताओं को छीन लेगी: https://drupal.org/node/1956778

पैच # 37 ने मेरे लिए काम किया।

Comments

जबकि पैच मेरे लिए विफल रहा है, मैं हार्ड-कोडेड "allowedContent = सच" में editors/ckeditor.incकी wysiwyg_ckeditor_settingsfunciton

— jrharshath

मैं खुश हूं कि आपका यह चलने लगा। उस पैच को wysiwyg के -dev संस्करण पर लागू करने की आवश्यकता है, ताकि यह लागू न हो सके।

— डेव ब्रंस

हालांकि उस सिंगल लाइन की तुलना में पैच में बहुत अधिक है। सुनिश्चित करें कि आप पूरी तरह से परीक्षण करें ताकि सब कुछ तदनुसार काम कर रहा हो!

— बीबी

Answer 2

मुझे एक उपाय मिला।

यह फ़िल्टरिंग बंद कर देता है, यह काम कर रहा है, लेकिन एक अच्छा विचार नहीं है ...

config.allowedContent = true;

एक सामग्री स्ट्रिंग के साथ खेलने के लिए आईडी, आदि के लिए ठीक काम करता है, लेकिन वर्ग और शैली विशेषताओं के लिए नहीं, क्योंकि आपके पास () और {} वर्ग और शैली फ़िल्टरिंग के लिए है।

इसलिए मेरी शर्त संपादक में किसी भी वर्ग को अनुमति देने के लिए है:

config.extraAllowedContent = '*(*)';

यह किसी भी वर्ग और किसी भी इनलाइन शैली की अनुमति देता है।

config.extraAllowedContent = '*(*);*{*}';

किसी भी टैग के लिए केवल वर्ग = "asdf1" और वर्ग = "asdf2" की अनुमति दें:

config.extraAllowedContent = '*(asdf1,asdf2)';

(इसलिए आपको वर्णनाम निर्दिष्ट करना होगा)

केवल p टैग के लिए केवल वर्ग = "asdf" की अनुमति देने के लिए:

config.extraAllowedContent = 'p(asdf)';

किसी भी टैग के लिए आईडी विशेषता की अनुमति देने के लिए:

config.extraAllowedContent = '*[id]';

आदि आदि

शैली टैग (<शैली प्रकार = "पाठ / सीएसएस"> ... </ शैली>):

config.extraAllowedContent = 'style';

थोड़ा और अधिक जटिल होने के लिए:

config.extraAllowedContent = 'span;ul;li;table;td;style;*[id];*(*);*{*}';

आशा है कि यह एक बेहतर उपाय है ...

Comments

कहाँ पे?!?!!?!? किस फाइल में !!! इंटरनेट पर किसी ने भी उल्लेख नहीं किया है कि इस config.allowedContent को कहां सेट किया जाना चाहिए?

— कोडरमा

@coderama in / admin / config / content / ckeditor, संपादित करने के लिए अपनी प्रोफ़ाइल चुनें, उन्नत विकल्पों का विस्तार करें और इसे कस्टम जावास्क्रिप्ट कॉन्फ़िगरेशन में

— डालें

Answer 3

ऐसा लगता है कि WYSIWYG मॉड्यूल में कुछ जोड़ा जाना चाहिए, संपादकों के लिए कस्टम सेटिंग्स जोड़ने की क्षमता एक बहुत व्यापक आवश्यकता है। लेकिन उस की अनुपस्थिति में, मैं अभी भी अपने आप को मॉड्यूल को संपादित नहीं करने की सलाह देता हूं क्योंकि यह अपग्रेड पर टूट जाएगा ... सौभाग्य से मॉड्यूल एक कॉल प्रदान करता है drupal_alter, इसलिए एक कस्टम मॉड्यूल में:

function mymodule_wysiwyg_editor_settings_alter(&$settings, $context){
    //check if the editor is ckeditor and the version is at least 4.0
    if($context['profile']->editor=='ckeditor' && $context['editor']['installed version'][0]>3){
        //add custom settings for ckeditor 4.+ here
        $settings['allowedContent'] = TRUE;
    }
}

जहाँ "mymodule" स्पष्ट रूप से आपके कस्टम मॉड्यूल का नाम है। यह मॉड्यूल को संपादित किए बिना कार्य को पूरा करता है।

Answer 4

मॉड्यूल / wysiwyg / संपादकों / ckeditor.inc के लिए निम्नलिखित को जोड़ने का प्रयास करें

'allowedContent' => TRUE, सेवा function wysiwyg_ckeditor_settings($editor, $config, $theme)

ताकि यह अब पढ़े:

function wysiwyg_ckeditor_settings($editor, $config, $theme) {
  $settings = array(
    'width' => 'auto',
    // For better compatibility with smaller textareas.
    'resize_minWidth' => 450,
    'height' => 420,
    // @todo Do not use skins as themes and add separate skin handling.
    'theme' => 'default',
    'skin' => !empty($theme) ? $theme : 'kama',
    // By default, CKEditor converts most characters into HTML entities. Since
    // it does not support a custom definition, but Drupal supports Unicode, we
    // disable at least the additional character sets. CKEditor always converts
    // XML default characters '&', '<', '>'.
    // @todo Check whether completely disabling ProcessHTMLEntities is an option.
    // ADDED  'allowedContent' => TRUE, to keep WYSIWYG from removing classes
    'entities_latin' => FALSE,
    'entities_greek' => FALSE,
    'allowedContent' => TRUE, 
  );

Answer 5

किसी भी स्रोत को हैक किए बिना, और यह भी पता लगाने की कोशिश किए बिना कि इन सेटिंग्स को कैसे पढ़ा जा रहा है, आप इसे अपने पसंदीदा मॉड्यूल के साथ जोड़ सकते हैं

function mymodule_wysiwyg_editor_settings_alter(&$settings, $context) {
    if ($context['profile']->editor == 'ckeditor') {
        $settings['extraAllowedContent'] = array(
            'a[download,type,length,href]',
            'span;ul;li;table;tr;td;style;*[id];*(*);*{*}'
        );
    }
}

ओपी से जो सेटिंग मांगी जा रही है, वे *(*);*{*}ऊपर दिए गए @ टॉमी के जवाब से हैं। यह किसी भी तत्व पर वर्ग और शैली विशेषताओं की अनुमति देता है। बाकी सिर्फ उदाहरण प्रविष्टियाँ हैं। एक अन्य उदाहरण के रूप में, यह प्रविष्टि मीडिया मॉड्यूल द्वारा आवश्यक टैग की अनुमति देता है।

'img[title,alt,src,data-cke-saved-src](wysiwyg-break,drupal-content);video[width,height,controls,src](*);source[src,type];audio[controls,src](*);img[*](media-element,file-default)',

Answer 6

फ़िल्टर किए गए HTML- फ़िल्टर उन तत्वों से कक्षाओं को निकालते हैं जो इसके अनुमत HTML तत्वों में नहीं हैं । पैराग्राफ टैग ( <p>) डिफ़ॉल्ट रूप से नहीं है (जो भ्रामक और अप्राकृतिक हो सकता है), अंततः यह सबसे लगातार तत्व हो सकता है जहां कक्षा लागू होती है। एक बार जब आप इसे वहां रख देते हैं, तो फ़िल्टर किए गए HTML अब इन टैग से कक्षाएं नहीं लेंगे। वही छवि टैग के लिए जाता है ( <img>)।

Comments

लेकिन, HTML तत्वों के अनुमत विकल्प में कक्षा कैसे लगाएं। जहाँ तक मेरी जानकारी है, आप HTML एलिमेंट को लिस्ट में डाल सकते हैं जैसे <div>, <span> इत्यादि। इसलिए इस डिव और स्पैन को छीन नहीं लिया जाएगा, लेकिन वहाँ क्लास कैसे लगाई जाए, क्या आप इसका उदाहरण दे सकते हैं?

— कोडनेक्स्ट

वहां क्लास लगाने की जरूरत नहीं है । यदि HTML एलिमेंट लिस्ट में है, तो इसका क्लैस (अ) अछूता नहीं रहेगा।

— cptstarling

मुझे समझ नहीं आ रहा है कि कल मेरी पोस्ट क्यों दिखाई दे रही है, मैंने कई महीनों पहले यह पूछा था, क्या कोई मुद्दा है ???????

— कोडनेक्स्ट

अजीब, क्योंकि आपने जो उत्तर दिया वह केवल 2 दिन पुराना है :)

— cptstarling

नहीं यार, बहुत अजीब है, मैंने इस पर महीनों तक कुछ नहीं किया है ... ओह

— माय