CKEditor automatycznie usuwa klasy z div

140

Używam CKEditor jako edytora zaplecza w mojej witrynie. Prowadzi mnie jednak dookoła zakrętu, ponieważ wydaje się, że chce zmienić kod tak, jak uważa za stosowny, za każdym razem, gdy naciskam przycisk źródła. Na przykład, jeśli trafię na źródło i utworzę <div>...

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

Następnie bez wyraźnego powodu usuwa klasę z klasy <div>, więc kiedy ponownie trafiam na źródło, została zmieniona na ...

<div>some content</div>

Przypuszczam, że to irytujące zachowanie można wyłączyć w programie config.js, ale kopałem i nie mogę znaleźć niczego w dokumentacji, aby je wyłączyć.

Iain Simpson
źródło
8
Znalazłem rozwiązanie po wielu poszukiwaniach, jeśli wejdziesz do config.js i ustawisz CKEDITOR.config.allowedContent = true; dzięki temu edytor nie będzie się tym zajmował.
Iain Simpson,

Odpowiedzi:

284

Wyłączanie filtrowania treści

Najłatwiejszym rozwiązaniem jest przejście do config.js i ustawienie:

config.allowedContent = true;

( Pamiętaj, aby wyczyścić pamięć podręczną przeglądarki ). Następnie CKEditor w ogóle przestaje filtrować wprowadzoną zawartość. Jednak spowoduje to całkowite wyłączenie filtrowania treści, które jest jedną z najważniejszych funkcji CKEditor.

Konfigurowanie filtrowania treści

Możesz także precyzyjniej skonfigurować filtr zawartości CKEditor, aby zezwalać tylko na te elementy, klasy, style i atrybuty, których potrzebujesz. To rozwiązanie jest o wiele lepsze, ponieważ CKEditor nadal usunie dużo kiepskiego kodu HTML, który przeglądarki generują podczas kopiowania i wklejania treści, ale nie usunie żądanej zawartości.

Na przykład możesz rozszerzyć domyślną konfigurację CKEditor, aby akceptowała wszystkie klasy div:

config.extraAllowedContent = 'div(*)';

Lub trochę rzeczy związanych z Bootstrapem:

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

Możesz też zezwolić na listy opisów z opcjonalnymi diratrybutami elementów dti dd:

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

To były tylko bardzo podstawowe przykłady. Możesz pisać wszelkiego rodzaju reguły - wymagające atrybutów, klas lub stylów, pasujące tylko do specjalnych elementów, dopasowujące wszystkie elementy. Możesz także zabronić pewnych rzeczy i całkowicie przedefiniować zasady CKEditor. Przeczytaj więcej o:

Iain Simpson
źródło
3
Spowoduje to wyłączenie tej funkcji. Lepiej skonfigurować niż wyłączyć.
oleq
1
@lain Simpson: Nadal musisz ustawić to pytanie jako odpowiedź. Dzięki btw za znalezienie rozwiązania: D
Jacob van Lingen
1
Czasami to rozwiązanie działa, czasami nie. Atrybut stylu zostaje usunięty, tylko czasami reszta pozostaje.
machineaddict
2
Pracuję z czymś o nazwie Kentico, które używa tego edytora. Dodałem wiersz „CKEDITOR.config.allowedContent = true;” do mojego pliku config.js, ale nadal trwa ponowne formatowanie mojego kodu HTML, co powoduje uszkodzenie kodu Bootstrap. Czy ktoś ma jakieś pomysły?
Tom Bowen,
1
Dzięki za idealne rozwiązanie. Oszczędność dnia dla mnie.
Soony
61

Znalazłem rozwiązanie.

To wyłącza filtrowanie, działa, ale nie jest to dobry pomysł ...

config.allowedContent = true;

Gra z ciągiem zawartości działa dobrze w przypadku id, itp., Ale nie w przypadku atrybutów class i style, ponieważ masz () i {} dla filtrowania klas i stylów.

Więc stawiam na dopuszczenie dowolnej klasy w edytorze:

config.extraAllowedContent = '*(*)';

Pozwala to na dowolną klasę i dowolny styl wbudowany.

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

Aby zezwolić tylko na class = "asdf1" i class = "asdf2" dla dowolnego tagu:

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

(więc musisz określić nazwy klas)

Aby zezwolić tylko na class = "asdf" tylko dla tagu p:

config.extraAllowedContent = 'p(asdf)';

Aby zezwolić na atrybut id dla dowolnego tagu:

config.extraAllowedContent = '*[id]';

itd itd

Aby zezwolić na tag stylu (<style type = "text / css"> ... </style>):

config.extraAllowedContent = 'style';

Aby być nieco bardziej złożonym:

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

Mam nadzieję, że to lepsze rozwiązanie ...

Tommy z LIW
źródło
1
to jest wspaniałe ta
Rippo
również zobaczyć docs CKEditor dla extraAllowedContent
doub1ejack
10 gwiazdek za odpowiedź
Brijesh Mavani
Uznanie za twój wysiłek!
Michel,
15

Edycja : ta odpowiedź jest dla tych, którzy używają modułu ckeditor w drupalu.

Znalazłem rozwiązanie, które nie wymaga modyfikacji pliku ckeditor js.

ta odpowiedź jest kopiowana stąd . wszystkie kredyty powinny trafić do oryginalnego autora.

Idź do "Administracja >> Konfiguracja >> CKEditor"; w sekcji Profile wybierz swój profil (np. Pełny).

Edytuj ten profil i w sekcji „Opcje zaawansowane >> Niestandardowa konfiguracja JavaScript” dodaj config.allowedContent = true;.

wprowadź opis obrazu tutaj

Nie zapomnij opróżnić pamięci podręcznej na karcie Wydajność.

sepehr
źródło
4
Ta odpowiedź dotyczy tylko drupala ... ale w każdym razie dzięki, ponieważ właśnie szukałem rozwiązania dla drupala.
LarS,
1
@LarS interesujące. Nie pamiętam, dlaczego myślałem, że to pytanie było związane z drupalem, ale wygląda na to, że pomogło facetom drupal.
wrzesień
14

Od wersji CKEditor v4.1 możesz to zrobić w config.js programu CKEditor:

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

Szczegółową składnię dozwolonych reguł treści można znaleźć w oficjalnej dokumentacji

Marty ZHANG
źródło
Wystąpił błąd składni, który miałeś powyżej. W szczególności atrybuty stylu muszą być ustawione za pomocą kręconych ramion {} zamiast parens ()
kamelkev
Cześć kamelkev, moja odpowiedź dotyczy zajęć , a nie stylów , jak na pytanie. Zasadniczo tego właśnie używam i nie sądzę, aby zawierał błąd.
Marty ZHANG,
Dzięki za odpowiedź, *[id](*)załatwiłeś sprawę, próbowałem *[id,class]wcześniej, ale to w jakiś sposób nie pozwala na atrybut klasy. Dokumenty CKeditor są trochę jak labirynt.
GDmac
1
+1 Zrozumienie reguł dotyczących treści jest prawdopodobnie lepszym rozwiązaniem niż wyłączenie wszystkich filtrów, jak sugeruje wiele innych odpowiedzi.
Michael Martin-Smucker,
10

jeśli używasz ckeditor 4.x, możesz spróbować

config.allowedContent = true;

jeśli używasz ckeditor 3.x, możesz mieć ten problem .

spróbuj umieścić następujący wiersz w config.js

config.ignoreEmptyParagraph = false;
Wasif.Butt
źródło
config.ignoreEmptyParagraph=false;jest jedynym rozwiązaniem, które zadziałało, spośród wszystkich odpowiedzi, których wypróbowałem. Dziękuję Ci.
Stefan
9

Nazywa się to ACF (Automatic Content Filter) w ckeditor. Usuwa wszystkie unnessary tagi Co używamy w treści tekstowej. Używając tego polecenia w pliku config.js, należy wyłączyć to ACK.

config.allowedContent = true;
Mari Selvan
źródło
4

Jeśli używasz Drupala ORAZ modułu o nazwie „WYSIWYG” z biblioteką CKEditor, rozwiązaniem może być poniższe obejście. U mnie działa jak urok. Używam CKEditor 4.4.5 i WYSIWYG 2.2 na Drupalu 7.33. Znalazłem to obejście tutaj: https://www.drupal.org/node/1956778 .

Oto on: Tworzę niestandardowy moduł i umieszczam następujący kod w pliku „.module”:

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

Mam nadzieję, że pomoże to innym użytkownikom Drupala.

pyretta
źródło
Dzięki za tę odpowiedź
drupala
3

Poniżej znajduje się pełny przykład dla CKEDITOR 4.x :

HTML

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

SCENARIUSZ

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

Powyższy kod zezwoli na wszystkie tagi w edytorze.

Więcej szczegółów: CK EDITOR Dozwolone reguły treści

Sanchit Gupta
źródło
0

Zauważyłem, że przełączenie się na używanie pełnego html zamiast filtrowanego html (pod edytorem w rozwijanym polu Format tekstu) jest tym, co naprawiło ten problem. W przeciwnym razie styl zniknąłby.

cdavidyoung
źródło
0

Chciałbym dodać to config.allowedContent = true; musi zostać dodany do pliku ckeditor.config.js, a nie config.js, config.js nic dla mnie nie zrobił, ale dodanie go do górnego obszaru ckeditor.config.js zachowało moje klasy div

Alpdog14
źródło
0

Inną opcją, jeśli używasz drupal, jest po prostu dodanie stylu CSS, którego chcesz użyć. w ten sposób nie usuwa stylu ani nazwy klasy.

więc w moim przypadku pod zakładką css w drupal 7 po prostu dodaj coś w rodzaju

facebook = span.icon-facebook2

sprawdź także, czy przycisk stylów czcionek jest włączony

Daniel
źródło
0

Mam ten sam problem na chrome z ckeditorem 4.7.1. Po prostu wyłącz pasteFilter na instancji ckeditor instanceReady Ta właściwość wyłącza wszystkie opcje filtru Advance Content Filter (ACF).

 CKEDITOR.on('instanceReady', function (ev) {
        ev.editor.pasteFilter.disabled = true;
    });
pandian_Snkl
źródło