Sto usando CKEditor come editor di back-end sul mio sito web. Mi sta guidando dietro la curva sebbene sembri voler cambiare il codice in modo che lo ritenga opportuno ogni volta che premo il pulsante sorgente. Ad esempio, se colpisco la fonte e creo un <div>...

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

Quindi per nessuna ragione apparente toglie la classe da <div>, quindi quando ho colpito di nuovo il codice sorgente è stato cambiato in ...

<div>some content</div>

Presumo che questo comportamento irritante possa essere disattivato in config.js, ma ho scavato e non riesco a trovare nulla nella documentazione per disattivarlo.

Disabilitazione del filtro contenuti

La soluzione più semplice è andare su config.js e impostare:

config.allowedContent = true;

( Ricorda di cancellare la cache del browser ). Quindi CKEditor smette di filtrare affatto il contenuto immesso. Tuttavia, questo disabiliterà totalmente il filtro dei contenuti, che è una delle funzionalità più importanti di CKEditor.

Configurazione del filtro contenuti

Puoi anche configurare il filtro contenuti di CKEditor in modo più preciso per consentire solo questi elementi, classi, stili e attributi di cui hai bisogno. Questa soluzione è molto migliore, poiché CKEditor rimuoverà ancora un sacco di codice HTML che i browser producono quando copiano e incollano il contenuto, ma non rimuoveranno il contenuto desiderato.

Ad esempio, puoi estendere la configurazione predefinita di CKEditor per accettare tutte le classi div:

config.extraAllowedContent = 'div(*)';

O alcune cose Bootstrap:

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

Oppure puoi consentire elenchi di descrizioni con dirattributi dte ddelementi opzionali :

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

Questi erano solo esempi di base. Puoi scrivere tutti i tipi di regole, che richiedono attributi, classi o stili, abbinando solo elementi speciali, abbinando tutti gli elementi. Puoi anche vietare le cose e ridefinire totalmente le regole di CKEditor. Maggiori informazioni su:

• Filtro dei contenuti in CKEditor : perché è necessario il filtro dei contenuti.
• Filtro contenuto avanzato - nella descrizione approfondita del meccanismo di filtro.
• Regole di contenuto consentite : come scrivere le regole di contenuto consentite.

Ho trovato una soluzione

Questo disattiva il filtro, funziona, ma non è una buona idea ...

config.allowedContent = true;

Giocare con una stringa di contenuto funziona bene per id, ecc., Ma non per gli attributi di classe e stile, perché hai () e {} per il filtro di classe e stile.

Quindi la mia scommessa per consentire qualsiasi classe nell'editor è:

config.extraAllowedContent = '*(*)';

Ciò consente qualsiasi classe e qualsiasi stile in linea.

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

Per consentire solo class = "asdf1" e class = "asdf2" per qualsiasi tag:

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

(quindi devi specificare i nomi delle classi)

Per consentire solo class = "asdf" solo per il tag p:

config.extraAllowedContent = 'p(asdf)';

Per consentire l'attributo id per qualsiasi tag:

config.extraAllowedContent = '*[id]';

ecc ecc

Per consentire il tag di stile (<style type = "text / css"> ... </style>):

config.extraAllowedContent = 'style';

Per essere un po 'più complesso:

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

Spero sia una soluzione migliore ...

Modifica : questa risposta è per coloro che usano il modulo ckeditor in drupal.

Ho trovato una soluzione che non richiede la modifica del file js ckeditor.

questa risposta viene copiata da qui . tutti i crediti dovrebbero andare all'autore originale.

Vai su "Ammin >> Configurazione >> CKEditor"; in Profili, scegli il tuo profilo (ad es. Completo).

Modifica quel profilo e in "Opzioni avanzate >> Configurazione JavaScript personalizzata" aggiungi config.allowedContent = true;.

Non dimenticare di svuotare la cache in "Scheda Prestazioni".

Da CKEditor v4.1, puoi farlo in config.js di CKEditor:

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

È possibile fare riferimento alla documentazione ufficiale per la sintassi dettagliata delle Regole sui contenuti consentiti

se stai usando ckeditor 4.x puoi provare

config.allowedContent = true;

se stai usando ckeditor 3.x potresti avere questo problema .

prova a inserire la seguente riga in config.js

config.ignoreEmptyParagraph = false;

Questo si chiama ACF (Filtro contenuto automatico) in ckeditor. Rimuove tutti i tag unnessary Cosa stiamo usando nel contenuto del testo. Usando questo comando nel tuo file config.js, dovresti disattivare questo ACK.

config.allowedContent = true;

Fare riferimento alla guida ufficiale ai filtri avanzati per i contenuti e al tutorial sull'integrazione dei plug-in .

Troverai molto più di questo su questa potente funzione. Vedi anche config.extraAllowedContent che sembra adatto alle tue esigenze.

Se si utilizza Drupal AND il modulo chiamato "WYSIWYG" con la libreria CKEditor, la soluzione seguente potrebbe essere una soluzione. Per me funziona come un fascino. Uso CKEditor 4.4.5 e WYSIWYG 2.2 in Drupal 7.33. Ho trovato questa soluzione alternativa qui: https://www.drupal.org/node/1956778 .

Eccolo: creo un modulo personalizzato e inserisco il seguente codice nel 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;
  }
}
?>

Spero che questo aiuti altri utenti Drupal.

Di seguito è riportato l'esempio completo per CKEDITOR 4.x :

HTML

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

SCRIPT

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

Il codice sopra consentirà tutti i tag nell'editor.

Per ulteriori dettagli: Regole di contenuto consentite per EDITOR CK

Ho scoperto che passare a utilizzare HTML completo invece di HTML filtrato (sotto l'editor nella casella a discesa Formato testo) è ciò che ha risolto questo problema per me. Altrimenti lo stile scomparirebbe.

Vorrei aggiungere questo config.allowedContent = true; deve essere aggiunto al file ckeditor.config.js non al file config.js, config.js non ha fatto nulla per me ma aggiungendolo all'area superiore di ckeditor.config.js ho mantenuto le mie classi div

Un'altra opzione se si utilizza drupal è semplicemente aggiungere lo stile CSS che si desidera utilizzare. in questo modo non elimina lo stile o il nome della classe.

quindi nel mio caso nella scheda css di drupal 7 aggiungo semplicemente qualcosa di simile

facebook = span.icon-facebook2

controlla anche che il pulsante stili di carattere sia abilitato

Devo affrontare lo stesso problema su Chrome con ckeditor 4.7.1. Disattiva semplicemente pasteFilter su ckeditor instanceReady. Questa proprietà disabilita tutte le opzioni di filtro di Advance Content Filter (ACF).

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