Я использую 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, который браузеры создают при копировании и вставке контента, но не удаляет нужный контент.

Например, вы можете расширить конфигурацию CKEditor по умолчанию, чтобы принять все классы div:

config.extraAllowedContent = 'div(*)';

Или кое-что из Bootstrap:

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

Или вы можете позволить описание списков с помощью дополнительных dirатрибутов dtи ddэлементов:

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

Это были очень простые примеры. Вы можете писать всевозможные правила - требуя атрибутов, классов или стилей, сопоставляя только специальные элементы, сопоставляя все элементы. Вы также можете запретить что-либо и полностью переопределить правила CKEditor. Узнать больше о:

• Контентная фильтрация в CKEditor - зачем вам контентный фильтр.
• Advanced Content Filter - подробное описание механизма фильтрации.
• Разрешенные правила контента - как писать разрешенные правила контента.

Я нашел решение.

Это отключает фильтрацию, работает, но не очень хорошая идея ...

config.allowedContent = true;

Игра со строкой содержимого отлично подходит для id и т. Д., Но не для атрибутов class и style, потому что у вас есть () и {} для фильтрации классов и стилей.

Итак, я ставлю на то, чтобы разрешить любой класс в редакторе:

config.extraAllowedContent = '*(*)';

Это позволяет использовать любой класс и любой встроенный стиль.

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

Чтобы разрешить только class = "asdf1" и class = "asdf2" для любого тега:

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

(поэтому вы должны указать имена классов)

Чтобы разрешить только class = "asdf" только для тега p:

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

Надеюсь, это лучшее решение ...

Изменить : этот ответ предназначен для тех, кто использует модуль ckeditor в drupal.

Я нашел решение, которое не требует модификации js файла ckeditor.

этот ответ скопирован отсюда . все кредиты должны принадлежать оригинальному автору.

Перейдите в «Админ >> Конфигурация >> CKEditor»; в разделе "Профили" выберите свой профиль (например, Полный).

Отредактируйте этот профиль и добавьте в «Дополнительные параметры >> Пользовательская конфигурация JavaScript» config.allowedContent = true;.

Не забудьте очистить кеш на вкладке «Производительность».

Начиная с CKEditor v4.1, вы можете сделать это в config.js CKEditor:

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;

Это называется ACF (автоматический фильтр содержимого) в ckeditor. Он удаляет все ненужные теги, которые мы используем в текстовом содержимом. Использование этой команды в вашем файле config.js должно отключить этот ACK.

config.allowedContent = true;

См. Официальное руководство по расширенному фильтру содержимого и руководство по интеграции плагинов .

Вы найдете гораздо больше об этой мощной функции. Также см. Config.extraAllowedContent, который кажется подходящим для ваших нужд.

Если вы используете Drupal И модуль под названием «WYSIWYG» с библиотекой CKEditor, то следующий обходной путь может быть решением. Для меня это работает как шарм. Я использую CKEditor 4.4.5 и WYSIWYG 2.2 в Drupal 7.33. Я нашел здесь обходной путь: 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; нужно добавить в файл ckeditor.config.js, а не в config.js, config.js ничего не сделал для меня, но добавление его в верхнюю область ckeditor.config.js сохранило мои классы div

Другой вариант при использовании drupal - просто добавить стиль CSS, который вы хотите использовать. таким образом он не удаляет стиль или имя класса.

поэтому в моем случае на вкладке css в drupal 7 просто добавьте что-то вроде

facebook = span.icon-facebook2

также убедитесь, что кнопка font-styles включена

У меня такая же проблема на Chrome с ckeditor 4.7.1. Просто отключите pasteFilter на экземпляре ckeditor instanceReady. Это свойство отключает все параметры фильтрации расширенного фильтра содержимого (ACF).

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