ป้องกัน WYSIWYG + CKEditor จากการแยกคลาส html

ฉันใช้เครื่องมือแก้ไขแบบ WYSIWYG กับ CKEditor ฉันพบว่าเมื่อเพิ่มคลาสที่กำหนดเองให้กับองค์ประกอบของฉันจากมุมมอง "ซอร์ส" CKEditor จะแยกคลาสเหล่านั้นออกจากมุมมองซอร์ส

เมื่อ googling หาวิธีแก้ปัญหานี้ฉันพบหน้าโมดูล CKEditorซึ่งอธิบายวิธีแก้ไขเมื่อใช้ CKEditor เพียงอย่างเดียว (โดยทั่วไปเราจำเป็นต้องตั้งค่า JS config.allowedContent = trueในการตั้งค่าตัวกรองเนื้อหาขั้นสูง)

อย่างไรก็ตามเมื่อใช้ CKEditor ผ่าน WYSIWYG การตั้งค่าเหล่านี้จะไม่ปรากฏในส่วนต่อประสานผู้ดูแลระบบ คุณจะประสบความสำเร็จเหมือนกันได้อย่างไรเมื่อใช้ CKEditor ผ่าน WYSIWYG

PS: ฉันไม่สามารถใช้ CKEditor เพียงอย่างเดียวเพราะมันไม่ได้ทำงานร่วมกับปลั๊กอินสื่อ

คุณใช้ CKEditor รุ่นใด มีปัญหากับ CKEditor 4.1+ ซึ่งมีคุณสมบัติที่เรียกว่า Automatic Content Filter (ACF) ที่จะตัดแอตทริบิวต์โดยอัตโนมัติที่ไม่ได้กำหนดไว้สำหรับตัวแก้ไข: https://drupal.org/node/1956778

Patch # 37 ในปัญหาใช้งานได้สำหรับฉัน

ฉันพบวิธีแก้ปัญหา

สิ่งนี้ปิดการกรอง แต่ก็ใช้งานได้ แต่ไม่ใช่ความคิดที่ดี ...

config.allowedContent = true;

ในการเล่นกับสตริงเนื้อหาจะทำงานได้ดีสำหรับ id ฯลฯ แต่ไม่ใช่สำหรับแอตทริบิวต์คลาสและสไตล์เนื่องจากคุณมี () และ {} สำหรับการกรองคลาสและสไตล์

ดังนั้นการเดิมพันของฉันคือการอนุญาตให้คลาสใด ๆ ในโปรแกรมแก้ไขคือ:

config.extraAllowedContent = '*(*)';

สิ่งนี้อนุญาตให้คลาสและสไตล์อินไลน์ใด ๆ

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

หากต้องการอนุญาตเฉพาะ class = "asdf1" และ class = "asdf2" สำหรับแท็กใด ๆ :

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

(ดังนั้นคุณต้องระบุชื่อคลาส)

หากต้องการอนุญาตเฉพาะ class = "asdf" สำหรับแท็ก p เท่านั้น:

config.extraAllowedContent = 'p(asdf)';

หากต้องการอนุญาตให้ใช้แอตทริบิวต์ id สำหรับแท็กใด ๆ :

config.extraAllowedContent = '*[id]';

ฯลฯ

หากต้องการอนุญาตแท็กสไตล์ (<style type = "text / css"> ... </style>):

config.extraAllowedContent = 'style';

จะซับซ้อนกว่านี้เล็กน้อย:

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

หวังว่ามันจะเป็นทางออกที่ดีกว่า ...

ดูเหมือนว่าสิ่งที่ควรเพิ่มลงในโมดูล 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" เห็นได้ชัดว่าเป็นชื่อของโมดูลที่คุณกำหนดเอง สิ่งนี้จะทำงานให้สำเร็จโดยไม่ต้องแก้ไขโมดูลของคนอื่น

ลองเพิ่มสิ่งต่อไปนี้ใน modules / wysiwyg / editors / 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, 
  );

โดยไม่ต้องแฮ็คแหล่งข้อมูลใด ๆ และโดยไม่ต้องพยายามหาว่าการอ่านการตั้งค่าเหล่านี้ที่เบลอที่ใดคุณสามารถเพิ่มสิ่งนี้ให้กับโมดูลที่คุณกำหนดเองได้

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];*(*);*{*}'
        );
    }
}

การตั้งค่าที่ OP ขอมานั้น*(*);*{*}มาจากคำตอบของ @Tommy ด้านบน ดูเหมือนว่าจะอนุญาตให้ใช้แอตทริบิวต์ของคลาสและสไตล์ในองค์ประกอบใด ๆ ส่วนที่เหลือเป็นเพียงรายการตัวอย่าง เป็นอีกตัวอย่างหนึ่งรายการนี้อนุญาตให้แท็กที่ต้องการโดยโมดูลสื่อ

'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)',

แถบ Filtered HTML ที่กรองออกจากชั้นเรียนจากองค์ประกอบที่ไม่อยู่ในขององค์ประกอบ HTML ได้รับอนุญาต แท็กวรรค ( <p>) ไม่ได้อยู่ในนั้นโดยค่าเริ่มต้น (ซึ่งอาจทำให้เกิดความสับสนและผิดธรรมชาติ) แม้ว่ามันอาจเป็นองค์ประกอบที่พบบ่อยที่สุดที่ใช้ในชั้นเรียน เมื่อคุณใส่ไว้ในนั้น HTML ที่กรองแล้วจะไม่ดึงคลาสออกจากแท็กเหล่านี้อีกต่อไป กันไปสำหรับแท็กภาพ ( <img>)