Zapobiegaj usuwaniu klas html przez WYSIWYG + CKEditor

9

Używam edytora WYSIWYG z CKEditor. Zauważyłem, że podczas dodawania niestandardowych klas do moich elementów z widoku „źródłowego”, CKEditor usuwa te klasy przy wyłączaniu widoku źródłowego.

Gdy szukam rozwiązania tego problemu, znalazłem stronę modułu CKEditor, która opisuje, jak to naprawić, używając samego CKEditora. (Zasadniczo musimy skonfigurować konfigurację JS config.allowedContent = truew ustawieniach Advanced Content Filter).

Jednak podczas korzystania z CKEditor przez WYSIWYG te ustawienia nie są ujawniane w interfejsie administratora. Jak to osiągnąć, używając CKEditor przez WYSIWYG?

PS: Nie mogę korzystać z samego CKEditora, ponieważ nie integruje się on z wtyczką mediów .

jrharshath
źródło
Jaką wersję CKEditor pobrałeś do swojego folderu bibliotek?
Beebee
przy użyciu wersji 4.2
jrharshath 30.10.13

Odpowiedzi:

4

Jakiej wersji CKEditor używasz? Występuje problem z CKEditor 4.1+, który ma funkcję o nazwie Automatic Content Filter (ACF), która automatycznie usuwa atrybuty niezdefiniowane dla edytora: https://drupal.org/node/1956778

Łatka # 37 w tym numerze działała dla mnie.

Dave Bruns
źródło
natomiast poprawka nie powiodło się dla mnie, zakodowane „allowedContent = true” na editors/ckeditor.inc„s wysiwyg_ckeditor_settingsfunciton
jrharshath
Cieszę się, że to działa. Łatka musi być zastosowana do wersji -dev programu wysiwyg, więc może to być powód, dla którego się nie zastosowała.
Dave Bruns
W patchu jest jednak znacznie więcej niż ta pojedyncza linia. Upewnij się, że testujesz w pełni, aby wszystko działało poprawnie!
Beebee
10

Znalazłem rozwiązanie.

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

config.allowedContent = true;

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

Więc zakładam się, aby zezwolić dowolnej klasie w edytorze:

config.extraAllowedContent = '*(*)';

Umożliwia to dowolną klasę i dowolny styl wbudowany.

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

Aby dopuścić tylko class = „asdf1” i class = „asdf2” dla dowolnego znacznika:

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

(więc musisz podać nazwy klas)

Aby zezwolić tylko klasie = "asdf" tylko dla znacznika p:

config.extraAllowedContent = 'p(asdf)';

Aby zezwolić na atrybut id dla dowolnego tagu:

config.extraAllowedContent = '*[id]';

itd itd

Aby zezwolić na znacznik 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 w LIW
źródło
1
GDZIE?!?!!?!? w którym pliku !!! nikt w Internecie nie wspomniał RAZ, gdzie należy ustawić ten config.allowedContent?
coderama
@coderama w / admin / config / content / ckeditor, wybierz swój profil do edycji, rozwiń Zaawansowane opcje i umieść go w niestandardowej konfiguracji JavaScript
UnsettlingTrend
2

Wydaje się, że należy to dodać do modułu WYSIWYG. Możliwość dodawania niestandardowych ustawień do edytorów jest dość powszechnym wymogiem. Ale w przypadku braku tego nadal polecam nie edytować samego modułu, ponieważ psuje się on przy uaktualnieniach ... na szczęście moduł zapewnia wywołanie drupal_alter, więc w module niestandardowym:

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

gdzie „mymoduł” to oczywiście nazwa niestandardowego modułu. Wykonuje to zadanie bez edytowania czyichś modułów.

Trey
źródło
0

Spróbuj dodać następujące elementy do module / wysiwyg / editors / ckeditor.inc

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

tak, że teraz brzmi:

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, 
  );
Todd Austin
źródło
0

Bez włamywania się do żadnych źródeł, a także bez próby ustalenia GDZIE odczytywane są te ustawienia, możesz dodać to do własnego modułu niestandardowego

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

Ustawienia, o które prosi OP, *(*);*{*}pochodzą z odpowiedzi @Tommy powyżej. Wydaje się, że pozwala to na atrybuty klasy i stylu dla dowolnego elementu. Reszta to tylko przykładowe wpisy. Jako kolejny przykład ten wpis dopuszcza tagi potrzebne modułowi multimediów.

'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)',
pospolity
źródło
0

Filtrowany filtr HTML usuwa klasy z elementów, które nie znajdują się w dozwolonych elementach HTML . Znacznik akapitu ( <p>) nie jest tam domyślnie (co może być mylące i nienaturalne), chociaż może być najczęstszym elementem, w którym stosowana jest klasa. Po umieszczeniu go tam Filtrowany HTML nie będzie już usuwał klas z tych tagów. To samo dotyczy tagów graficznych ( <img>).

cptstarling
źródło
Ale jak umieścić klasę w opcji Dozwolone elementów HTML. O ile mi wiadomo, możesz umieścić element HTML na liście, tj. <div>, <span> itd. Więc jeśli chodzi o ten div i span, nie zostanie on usunięty, ale jak umieścić tam klasę, czy możesz podać przykład?
CodeNext
Nie ma potrzeby umieszczania tam klasy . Jeśli element HTML znajduje się na liście, jego klasy (klasy) pozostaną nietknięte i nie zostaną usunięte.
cptstarling
Nie rozumiem, dlaczego mój post wyświetla się wczoraj, zapytałem to kilka miesięcy temu, czy jest jakiś problem ???????
CodeNext
Dziwne, ponieważ odpowiedź, na którą odpowiedziałeś, ma dopiero około 2 dni :)
cptstarling
Żaden człowiek, bardzo dziwny, nic nie robiłem od miesięcy ... O mój boże, pozwól mi się wylogować i ponownie zalogować ...
CodeNext