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.

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:

• Pemfilteran konten dalam CKEditor - mengapa Anda perlu filter konten.
• Filter Konten Lanjutan - dalam deskripsi mendalam tentang mekanisme penyaringan.
• Aturan konten yang dibolehkan - cara menulis aturan konten yang diizinkan.

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

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

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

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

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;

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;

Silakan merujuk ke panduan Filter Konten Lanjutan dan tutorial integrasi plugin resmi .

Anda akan menemukan lebih dari ini tentang fitur hebat ini. Lihat juga config.extraAllowedContent yang tampaknya cocok untuk kebutuhan Anda.

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.

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

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.

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

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

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