Cegah WYSIWYG + CKEditor dari pengupasan kelas html

Saya menggunakan editor WYSIWYG dengan CKEditor. Saya menemukan bahwa ketika menambahkan kelas khusus ke elemen saya dari tampilan "sumber", CKEditor menghapus kelas-kelas tersebut ketika beralih dari tampilan sumber.

Ketika mencari solusi untuk ini, saya menemukan halaman modul CKEditor yang menjelaskan cara memperbaikinya saat menggunakan CKEditor saja. (Pada dasarnya, kita perlu mengatur konfigurasi JS config.allowedContent = truedalam pengaturan Filter Konten Lanjutan).

Namun, ketika menggunakan CKEditor via WYSIWYG, pengaturan ini tidak terbuka di antarmuka admin. Bagaimana Anda mencapai hal yang sama saat menggunakan CKEditor via WYSIWYG?

PS: Saya tidak bisa menggunakan CKEditor sendirian karena tidak terintegrasi dengan plugin media .

Versi CKEditor apa yang Anda gunakan? Ada masalah dengan CKEditor 4.1+, yang memiliki fitur yang disebut Filter Konten Otomatis (ACF) yang akan secara otomatis menghapus atribut yang tidak ditentukan untuk editor: https://drupal.org/node/1956778

Patch # 37 dalam masalah ini berhasil untuk saya.

Saya menemukan solusinya.

Ini mematikan penyaringan, itu berfungsi, tetapi bukan ide yang baik ...

config.allowedContent = true;

Untuk bermain dengan string konten berfungsi dengan baik untuk id, dll, tetapi tidak untuk atribut kelas dan gaya, karena Anda memiliki () dan {} untuk pemfilteran kelas dan gaya.

Jadi taruhan saya adalah mengizinkan kelas mana pun di editor adalah:

config.extraAllowedContent = '*(*)';

Ini memungkinkan kelas apa saja dan gaya inline apa pun.

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

Untuk mengizinkan hanya class = "asdf1" dan class = "asdf2" untuk setiap tag:

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

(jadi Anda harus menentukan nama classnya)

Untuk mengizinkan hanya class = "asdf" hanya untuk tag p:

config.extraAllowedContent = 'p(asdf)';

Untuk mengizinkan atribut id untuk tag apa pun:

config.extraAllowedContent = '*[id]';

dll

Untuk mengizinkan tag gaya (<style type = "text / css"> ... </style>):

config.extraAllowedContent = 'style';

Menjadi sedikit lebih kompleks:

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

Semoga ini solusi yang lebih baik ...

Ini sepertinya sesuatu yang harus ditambahkan ke dalam modul WYSIWYG, kemampuan untuk menambahkan pengaturan khusus ke editor adalah persyaratan yang cukup luas. Tetapi dengan tidak adanya hal itu, saya masih menyarankan untuk tidak mengedit modul itu sendiri karena akan merusak upgrade ... untungnya modul ini memang memberikan panggilan drupal_alter, jadi dalam modul khusus:

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;
    }
}

di mana "mymodule" jelas merupakan nama modul khusus Anda. Ini menyelesaikan tugas tanpa mengedit modul elemen seseorang.

Coba tambahkan yang berikut ini ke modules / wysiwyg / editor / ckeditor.inc

'allowedContent' => TRUE, untuk function wysiwyg_ckeditor_settings($editor, $config, $theme)

sehingga sekarang terbaca:

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

Tanpa meretas sumber apa pun, dan juga tanpa mencoba mencari tahu DI MANA bleep pengaturan ini sedang dibaca, Anda bisa menambahkan ini ke Anda sendiri modul kustom

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

Pengaturan yang diminta OP berasal *(*);*{*}dari jawaban @Tommy di atas. Ini tampaknya memungkinkan atribut kelas dan gaya pada elemen apa pun. Sisanya hanyalah entri contoh. Sebagai contoh lain, entri ini memungkinkan tag yang dibutuhkan oleh modul media.

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

Filter HTML Tersaring menghilangkan kelas dari elemen yang tidak ada dalam elemen HTML yang diizinkan . Tag paragraf ( <p>) tidak ada di sana secara default (yang mungkin membingungkan dan tidak wajar), meskipun itu mungkin elemen paling sering di mana kelas diterapkan. Setelah Anda memasukkannya ke sana, HTML yang Difilter tidak akan lagi menghapus kelas dari tag ini. Hal yang sama berlaku untuk tag gambar ( <img>).