내가 사용하고 CKEditor를 내 웹 사이트에 백 엔드 편집기로. 소스 버튼을 누를 때마다 코드가 어떻게 보이는지 변경하고 싶기 때문에 구부러졌습니다. 예를 들어 내가 소스를 치고 <div>...

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

그런 다음 명백한 이유없이 클래스를 클래스에서 제거 <div>하므로 소스를 다시 누르면 다음 과 같이 변경됩니다.

<div>some content</div>

이 자극적 인 행동은에서 끌 수 있다고 가정 config.js하지만, 발굴했으며 문서를 끄는 것을 찾을 수 없었습니다.

콘텐츠 필터링 비활성화

가장 쉬운 해결책은 config.js 및 설정으로 이동하는 것입니다 .

config.allowedContent = true;

( 브라우저 캐시를 지우십시오 ). 그런 다음 CKEditor는 입력 된 컨텐츠 필터링을 전혀 중지합니다. 그러나 이것은 가장 중요한 CKEditor 기능 중 하나 인 콘텐츠 필터링 을 완전히 비활성화 합니다.

컨텐츠 필터링 구성

필요한 요소, 클래스, 스타일 및 속성 만 허용 하도록 CKEditor의 컨텐츠 필터를 보다 정확하게 구성 할 수도 있습니다 . 이 솔루션은 CKEditor가 콘텐츠를 복사하고 붙여 넣을 때 브라우저가 생성하는 엉터리 HTML을 많이 제거하지만 원하는 콘텐츠를 제거하지 않기 때문에 훨씬 좋습니다.

예를 들어, 모든 div 클래스를 허용하도록 기본 CKEditor의 구성을 확장 할 수 있습니다.

config.extraAllowedContent = 'div(*)';

또는 일부 부트 스트랩 물건 :

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

또는 당신은 옵션과 설명을 나열 할 수 있습니다 dir에 대한 속성 dt과 dd요소를 :

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

이것들은 매우 기본적인 예일뿐입니다. 특성, 클래스 또는 스타일이 필요하고 특수 요소 만 일치하고 모든 요소를 ​​일치시키는 모든 종류의 규칙을 작성할 수 있습니다. 당신은 또한 물건을 허용하지 않고 CKEditor의 규칙을 완전히 재정의 할 수 있습니다. 다음에 대해 더 읽어보십시오 :

• CKEditor의 컨텐츠 필터링 – 컨텐츠 필터가 필요한 이유.
• 고급 콘텐츠 필터 – 필터링 메커니즘에 대해 자세히 설명합니다.
• 허용 된 컨텐츠 규칙 – 허용 된 컨텐츠 규칙 을 작성하는 방법.

해결책을 찾았습니다.

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

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

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

편집 :이 답변은 drupal에서 ckeditor 모듈을 사용하는 사람들을위한 것입니다.

ckeditor js 파일을 수정할 필요가없는 솔루션을 찾았습니다.

이 답변은 여기 에서 복사 됩니다 . 모든 학점은 원저자에게 가야합니다.

"관리자 >> 구성 >> CKEditor"로 이동하십시오. 프로필에서 프로필을 선택하십시오 (예 : 전체).

해당 프로파일을 편집하고 "고급 옵션 >> 사용자 정의 JavaScript 구성"에서을 추가하십시오 config.allowedContent = true;.

"성능 탭"에서 캐시를 플러시하는 것을 잊지 마십시오.

CKEditor v4.1부터 CKEditor의 config.js에서이를 수행 할 수 있습니다.

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

허용 된 컨텐츠 규칙의 자세한 구문은 공식 문서를 참조하십시오

ckeditor 4.x를 사용하는 경우 시도해 볼 수 있습니다

config.allowedContent = true;

ckeditor 3.x를 사용하는 경우이 문제가 발생 했을 수 있습니다 .

config.js에 다음 줄을 넣으십시오.

config.ignoreEmptyParagraph = false;

이를 ckeditor에서 ACF (Automatic Content Filter)라고하며, 텍스트 컨텐츠에서 사용중인 모든 불필요한 태그를 제거합니다 .config.js 파일에서이 명령을 사용하면이 ACK를 해제해야합니다.

config.allowedContent = true;

공식 Advanced Content Filter 안내서 및 플러그인 통합 학습서를 참조하십시오 .

이 강력한 기능에 대해 이것보다 훨씬 더 많은 것을 찾을 수 있습니다. 필요에 맞는 config.extraAllowedContent 도 참조하십시오 .

Drupal과 CKEditor 라이브러리와 함께 "WYSIWYG"라는 모듈을 사용하는 경우 다음 해결 방법이 해결책이 될 수 있습니다. 나를 위해 그것은 매력처럼 작동합니다. Drupal 7.33에서 CKEditor 4.4.5 및 WYSIWYG 2.2를 사용합니다. https://www.drupal.org/node/1956778 에서이 해결 방법을 찾았습니다 .

여기 있습니다 : 커스텀 모듈을 만들고 ".module"파일에 다음 코드를 넣습니다.

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

다른 Drupal 사용자에게 도움이 되길 바랍니다.

다음은 CKEDITOR 4.x 의 전체 예입니다 .

HTML

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

스크립트

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

위의 코드는 편집기의 모든 태그를 허용합니다.

자세한 내용 : CK EDITOR 허용되는 콘텐츠 규칙

필터링 된 html (텍스트 형식 드롭 다운 상자의 편집기 아래) 대신 전체 html을 사용하도록 전환하면이 문제가 해결되었습니다. 그렇지 않으면 스타일이 사라집니다.

이 config.allowedContent = true를 추가하고 싶습니다. config.js가 아닌 ckeditor.config.js 파일에 추가해야합니다 .config.js는 나를 위해 아무것도하지 않았지만 ckeditor.config.js의 상단 영역에 추가하면 내 div 클래스가 유지됩니다.

drupal을 사용하는 경우 또 다른 옵션은 사용하려는 CSS 스타일을 추가하는 것입니다. 그렇게하면 스타일이나 클래스 이름이 제거되지 않습니다.

내 경우에는 drupal 7의 CSS 탭에서 다음과 같이 간단히 추가하십시오.

facebook = span.icon-facebook2

또한 글꼴 스타일 버튼이 활성화되어 있는지 확인하십시오

ckeditor 4.7.1에서 크롬에 동일한 문제가 있습니다. ckeditor instanceReady에서 pasteFilter를 비활성화하면됩니다.이 속성은 ACF (Advance Content Filter)의 모든 필터 옵션을 비활성화합니다.

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