CKEditor는 div에서 클래스를 자동으로 제거합니다.

CKEditor는 div에서 클래스를 자동으로 제거합니다.

---

내가 사용하고 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;

---

This is called ACF(Automatic Content Filter) in ckeditor.It remove all unnessary tag's What we are using in text content.Using this command in your config.js file should be turn off this ACK.

config.allowedContent = true;

---

Please refer to the official Advanced Content Filter guide and plugin integration tutorial.

You'll find much more than this about this powerful feature. Also see config.extraAllowedContent that seems suitable for your needs.

---

If you use Drupal AND the module called "WYSIWYG" with the CKEditor library, then the following workaround could be a solution. For me it works like a charm. I use CKEditor 4.4.5 and WYSIWYG 2.2 in Drupal 7.33. I found this workaround here: https://www.drupal.org/node/1956778.

Here it is: I create a custom module and put the following code in the ".module" file:

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

I hope this help other Drupal users.

---

Following is the complete example for CKEDITOR 4.x :

HTML

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

SCRIPT

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

The above code will allow all tags in the editor.

For more Detail : CK EDITOR Allowed Content Rules

---

I found that switching to use full html instead of filtered html (below the editor in the Text Format dropdown box) is what fixed this problem for me. Otherwise the style would disappear.

---

I would like to add this config.allowedContent = true; needs to be added to the ckeditor.config.js file not the config.js, config.js did nothing for me but adding it to the top area of ckeditor.config.js kept my div classes

---

Another option if using drupal is simply to add the css style that you want to use. that way it does not strip out the style or class name.

so in my case under the css tab in drupal 7 simply add something like

facebook=span.icon-facebook2

also check that font-styles button is enabled

---

I face same problem on chrome with ckeditor 4.7.1. Just disable pasteFilter on ckeditor instanceReady.This property disable all filter options of Advance Content Filter(ACF).

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

참고URL : https://stackoverflow.com/questions/15659390/ckeditor-automatically-strips-classes-from-div