CKEditor secara otomatis menghapus kelas dari div

140

Saya menggunakan CKEditor sebagai editor ujung belakang di situs web saya. Itu mendorong saya di tikungan meskipun karena tampaknya ingin mengubah kode sesuai keinginan setiap kali saya menekan tombol sumber. Misalnya jika saya menekan sumber dan membuat <div>...

<div class="myclass">some content</div>

Maka tanpa alasan yang jelas strip kelas dari <div>, jadi ketika saya menekan sumber lagi telah diubah menjadi ...

<div>some content</div>

Saya kira perilaku menjengkelkan ini bisa dimatikan dalam config.js, tetapi saya telah menggali dan tidak dapat menemukan apa pun dalam dokumentasi untuk mematikannya.

Iain Simpson
sumber
8
Saya menemukan solusinya setelah banyak menggali, jika Anda masuk ke config.js dan mengatur CKEDITOR.config.allowedContent = true; itu berhenti editor main-main dengan hal itu.
Iain Simpson

Jawaban:

284

Menonaktifkan pemfilteran konten

Solusi termudah adalah pergi ke config.js dan pengaturan:

config.allowedContent = true;

( Ingatlah untuk menghapus cache browser ). Kemudian CKEditor berhenti memfilter konten yang dimasukkan sama sekali. Namun, ini benar-benar akan menonaktifkan pemfilteran konten yang merupakan salah satu fitur CKEditor yang paling penting.

Mengkonfigurasi pemfilteran konten

Anda juga dapat mengonfigurasi filter konten CKEditor dengan lebih tepat untuk memungkinkan hanya elemen, kelas, gaya, dan atribut ini yang Anda butuhkan. Solusi ini jauh lebih baik, karena CKEditor masih akan menghapus banyak HTML jelek yang diproduksi browser saat menyalin dan menempelkan konten, tetapi tidak akan menghapus konten yang Anda inginkan.

Misalnya, Anda dapat memperluas konfigurasi CKEditor default untuk menerima semua kelas div:

config.extraAllowedContent = 'div(*)';

Atau beberapa hal Bootstrap:

config.extraAllowedContent = 'div(col-md-*,container-fluid,row)';

Atau Anda dapat mengizinkan daftar uraian dengan diratribut dtdan ddelemen opsional :

config.extraAllowedContent = 'dl; dt dd[dir]';

Ini hanya contoh yang sangat mendasar. Anda dapat menulis semua jenis aturan - membutuhkan atribut, kelas atau gaya, hanya mencocokkan elemen khusus, mencocokkan semua elemen. Anda juga dapat melarang hal-hal dan mendefinisikan kembali aturan CKEditor secara total. Baca lebih lanjut tentang:

Iain Simpson
sumber
3
Ini akan menonaktifkan fitur. Lebih baik mengkonfigurasi daripada menonaktifkan.
oleq
1
@lain Simpson: Anda masih perlu mengatur pertanyaan ini sebagai dijawab. Terima kasih untuk menemukan solusinya: D
Jacob van Lingen
1
Terkadang solusi ini berhasil, terkadang tidak. Atribut style dihapus, hanya kadang-kadang, sisanya tetap.
machineaddict
2
Saya sedang mengerjakan sesuatu yang disebut Kentico, yang menggunakan editor ini. Saya telah menambahkan baris "CKEDITOR.config.allowedContent = true;" ke config.js saya, tetapi masih memformat ulang HTML saya, yang memecah kode Bootstrap saya, ada yang punya ide?
Tom Bowen
1
Terima kasih atas solusi yang tepat. Penghemat satu hari untuk saya.
Soony
61

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 semua 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 ...

Tommy di LIW
sumber
1
ini superberb ta
Rippo
10 bintang untuk jawaban Anda
Brijesh Mavani
Kudos atas usaha Anda!
Michel
15

Edit : jawaban ini untuk mereka yang menggunakan modul ckeditor di drupal.

Saya menemukan solusi yang tidak memerlukan modifikasi file js ckeditor.

jawaban ini disalin dari sini . semua kredit harus ke penulis asli.

Pergi ke "Admin >> Konfigurasi >> CKEditor"; di bawah Profil, pilih profil Anda (misalnya Lengkap).

Edit profil itu, dan tambahkan "Opsi Lanjutan >> Konfigurasi JavaScript Khusus" config.allowedContent = true;.

masukkan deskripsi gambar di sini

Jangan lupa untuk membersihkan cache di bawah "tab Performance."

sepehr
sumber
4
Jawaban ini hanya untuk drupal ... tetapi tetap terima kasih, karena saya hanya mencari solusi drupal.
LarS
1
@Lar menarik. Saya tidak ingat mengapa saya pikir pertanyaan ini terkait dengan drupal, tetapi tampaknya telah membantu teman-teman drupal.
sepehr
14

Sejak CKEditor v4.1, Anda dapat melakukan ini di config.js dari CKEditor:

CKEDITOR.editorConfig = function( config ) {
  config.extraAllowedContent = '*[id](*)';  // remove '[id]', if you don't want IDs for HTML tags
}

Anda dapat merujuk ke dokumentasi resmi untuk sintaks terperinci dari Aturan Konten yang Diizinkan

Marty ZHANG
sumber
Ada kesalahan sintaks yang Anda miliki di atas. Atribut gaya khusus harus ditetapkan dengan keriting keriting {} alih-alih parens ()
kamelkev
Hai kamelkev, jawaban saya adalah untuk kelas , bukan untuk gaya , sesuai pertanyaan. Pada dasarnya, itulah yang saya gunakan, dan saya pikir tidak ada kesalahan.
Marty ZHANG
Terima kasih atas jawabannya, Anda *[id](*)berhasil, saya sudah mencoba *[id,class]sebelumnya, tetapi itu tidak memungkinkan atribut kelas. Dokumen CKeditor agak seperti labirin.
GDmac
1
+1 Memahami aturan konten mungkin merupakan solusi yang lebih baik daripada menonaktifkan semua pemfilteran, seperti yang disarankan oleh banyak jawaban lainnya.
Michael Martin-Smucker
10

jika Anda menggunakan ckeditor 4.x Anda dapat mencoba

config.allowedContent = true;

jika Anda menggunakan ckeditor 3.x Anda mungkin mengalami masalah ini .

coba letakkan baris berikut di config.js

config.ignoreEmptyParagraph = false;
Wasif. Tapi
sumber
config.ignoreEmptyParagraph=false;adalah satu-satunya solusi yang bekerja untuk saya, dari semua jawaban yang saya coba. Terima kasih.
Stefan
9

Ini disebut ACF (Filter Konten Otomatis) di ckeditor. Ini menghapus semua tag tidak sehat Apa yang kami gunakan dalam konten teks. Menggunakan perintah ini dalam file config.js Anda harus mematikan ACK ini.

config.allowedContent = true;
Mari Selvan
sumber
4

Jika Anda menggunakan Drupal DAN modul yang disebut "WYSIWYG" dengan perpustakaan CKEditor, maka solusi berikut ini bisa menjadi solusi. Bagi saya itu berfungsi seperti pesona. Saya menggunakan CKEditor 4.4.5 dan WYSIWYG 2.2 di Drupal 7.33. Saya menemukan solusi ini di sini: https://www.drupal.org/node/1956778 .

Ini dia: Saya membuat modul khusus dan meletakkan kode berikut di file ".module":

<?php
/**
 * Implements hook_wysiwyg_editor_settings_alter().
 */
function MYMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
  if ($context['profile']->editor == 'ckeditor') {
    $settings['allowedContent'] = TRUE;
  }
}
?>

Saya harap ini membantu pengguna Drupal lainnya.

pyretta
sumber
Terima kasih atas jawaban drupal ini
relipse
3

Berikut ini adalah contoh lengkap untuk CKEDITOR 4.x :

HTML

<textarea name="post_content" id="post_content" class="form-control"></textarea>

NASKAH

CKEDITOR.replace('post_content', {
   allowedContent:true,
});

Kode di atas akan memungkinkan semua tag di editor.

Untuk Lebih Detail: CK EDITOR Aturan Konten yang Diizinkan

Sanchit Gupta
sumber
0

Saya menemukan bahwa beralih menggunakan html penuh alih-alih html yang difilter (di bawah editor pada kotak dropdown Format Teks) adalah apa yang memperbaiki masalah ini bagi saya. Kalau tidak, gaya akan hilang.

cdavidyoung
sumber
0

Saya ingin menambahkan config.allowedContent = true; perlu ditambahkan ke file ckeditor.config.js bukan config.js, config.js tidak melakukan apa pun untuk saya, tetapi menambahkannya ke area teratas ckeditor.config.js membuat kelas div saya tetap

Alpdog14
sumber
0

Pilihan lain jika menggunakan drupal adalah menambahkan gaya css yang ingin Anda gunakan. dengan cara itu tidak menghilangkan gaya atau nama kelas.

jadi dalam kasus saya di bawah tab css di drupal 7 cukup tambahkan sesuatu seperti

facebook = span.icon-facebook2

juga periksa apakah tombol font-style diaktifkan

Daniel
sumber
0

Saya menghadapi masalah yang sama pada chrome dengan ckeditor 4.7.1. Cukup nonaktifkan pasteFilter pada ckeditor instanceReady.Properti ini menonaktifkan semua opsi filter dari Advance Content Filter (ACF).

 CKEDITOR.on('instanceReady', function (ev) {
        ev.editor.pasteFilter.disabled = true;
    });
pandian_Snkl
sumber