WYSIWYG + CKEditor가 HTML 클래스를 제거하지 못하도록 방지

CKEditor와 함께 WYSIWYG 편집기를 사용하고 있습니다. "소스"보기에서 요소에 사용자 정의 클래스를 추가 할 때 CKEditor가 소스보기에서 전환 할 때 해당 클래스를 제거합니다.

이것에 대한 해결책을 인터넷 검색 할 때 CKEditor를 단독으로 사용할 때이를 수정하는 방법을 설명하는 CKEditor 모듈 페이지 를 찾았 습니다. 기본적으로 config.allowedContent = true고급 컨텐츠 필터 설정에서 JS 구성을 설정해야합니다 .

그러나 WYSIWYG를 통해 CKEditor를 사용하는 경우 이러한 설정은 관리자 인터페이스에 표시되지 않습니다. WYSIWYG를 통해 CKEditor를 사용할 때 어떻게 동일한 결과를 얻습니까?

추신 : CKEditor는 미디어 플러그인 과 통합되지 않기 때문에 단독으로 사용할 수 없습니다 .

어떤 버전의 CKEditor를 사용하고 있습니까? CKEditor 4.1 이상에는 편집기에 대해 정의되지 않은 속성을 자동으로 제거하는 자동 컨텐츠 필터 (ACF)라는 기능이 있습니다. https://drupal.org/node/1956778

문제의 패치 # 37이 저에게 효과적이었습니다.

해결책을 찾았습니다.

필터링이 해제되어 작동하지만 좋은 생각은 아닙니다 ...

config.allowedContent = true;

클래스 및 스타일 필터링을 위해 () 및 {}가 있기 때문에 컨텐츠 문자열을 사용하는 것은 id 등에서는 잘 작동하지만 클래스 및 스타일 속성에는 적합하지 않습니다.

따라서 내 베팅은 편집기에서 클래스를 허용하는 것입니다.

config.extraAllowedContent = '*(*)';

이것은 모든 클래스와 인라인 스타일을 허용합니다.

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

모든 태그에 class = "asdf1"및 class = "asdf2"만 허용하려면 다음을 수행하십시오.

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

(따라서 클래스 이름을 지정해야합니다)

p 태그에 대해서만 class = "asdf"만 허용하려면 다음을 수행하십시오.

config.extraAllowedContent = 'p(asdf)';

태그에 id 속성을 허용하려면 다음을 수행하십시오.

config.extraAllowedContent = '*[id]';

등

스타일 태그를 허용하려면 (<style type = "text / css"> ... </ style>) :

config.extraAllowedContent = 'style';

좀 더 복잡해 지려면 :

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

더 나은 솔루션이기를 바랍니다 ...

이것은 WYSIWYG 모듈에 추가해야 할 것처럼 보입니다. 편집기에 사용자 정의 설정을 추가하는 기능은 매우 광범위한 요구 사항입니다. 그러나이가 없으면 업그레이드 할 때 모듈 자체를 편집하지 않는 것이 좋습니다. 다행히도 모듈은에 대한 호출을 제공 drupal_alter하므로 사용자 정의 모듈에서 다음을 수행하십시오.

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

여기서 "mymodule"은 분명히 사용자 정의 모듈의 이름입니다. 이것은 다른 사람의 모듈을 편집하지 않고 작업을 수행합니다.

modules / wysiwyg / editors / ckeditor.inc에 다음을 추가하십시오.

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

이제 읽습니다.

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

소스를 해킹하지 않고 이러한 설정을 읽는 위치를 파악하지 않고 사용자 정의 모듈에 추가 할 수 있습니다

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

OP가 요구하는 설정은 *(*);*{*}위의 @Tommy의 답변입니다. 이것은 모든 요소에 클래스 및 스타일 속성을 허용하는 것으로 보입니다. 나머지는 예제 항목입니다. 다른 예로,이 항목은 미디어 모듈에 필요한 태그를 허용합니다.

'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)',

필터링 된 HTML 필터는 허용 된 HTML 요소에 없는 요소에서 클래스를 제거합니다 . 단락 태그 ( <p>)는 클래스가 적용되는 가장 빈번한 요소 일 수 있지만 기본적으로 (혼동스럽고 부자연 스럽을 수 있음) 없습니다. 일단 거기에 넣으면 Filtered HTML은 더 이상 이러한 태그에서 클래스를 제거하지 않습니다. 이미지 태그 ( <img>)도 마찬가지입니다 .