CKEditor автоматически удаляет классы из div

140

Я использую CKEditor в качестве внутреннего редактора на своем веб-сайте. Это сводит меня с ума, поскольку, похоже, он хочет изменить код так, как он считает нужным, всякий раз, когда я нажимаю кнопку источника. Например, если я нажимаю источник и создаю <div>...

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

Затем он без видимой причины удаляет класс из класса <div>, поэтому, когда я снова нажимаю на источник, он был изменен на ...

<div>some content</div>

Я предполагаю, что это раздражающее поведение можно отключить в config.js, но я копался и не могу найти ничего в документации, чтобы отключить его.

Иэн Симпсон
источник
8
Я нашел решение после долгих поисков, если вы войдете в config.js и установите CKEDITOR.config.allowedContent = true; тогда он не дает редактору возиться с вещами.
Iain Simpson

Ответы:

284

Отключение фильтрации содержимого

Самое простое решение - это 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. Узнать больше о:

Иэн Симпсон
источник
3
Это отключит эту функцию. Лучше настроить, чем отключить.
oleq
1
@lain Simpson: Вам все равно нужно задать этот вопрос как ответ. Спасибо, кстати, за поиск решения: D
Якоб ван Линген
1
Иногда это решение работает, иногда нет. Атрибут стиля удаляется, только иногда, остальное остается.
machineaddict
2
Я работаю с чем-то под названием Kentico, в котором используется этот редактор. Я добавил строку «CKEDITOR.config.allowedContent = true;» в мой config.js, но он все еще переформатирует мой HTML, что нарушает мой код Bootstrap, у кого-нибудь есть идеи?
Том Боуэн
1
Спасибо за отличное решение. Для меня дневная экономия.
Soony
61

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

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

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

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

Томми в LIW
источник
1
это superberb ta
Rippo
также смотрите документацию ckEditor для extraAllowedContent
duplic1ejack
10 звезд за ваш ответ
user8478
Престижность за ваши усилия!
Michel
16

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

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

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

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

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

введите описание изображения здесь

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

sepehr
источник
4
Этот ответ предназначен только для drupal ... но в любом случае спасибо, потому что я просто искал решение для drupal.
LarS
1
@LarS интересно. Я не могу вспомнить, почему я подумал, что этот вопрос был связан с drupal, но, похоже, он помог ребятам из drupal.
sepehr
14

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

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

Подробный синтаксис правил разрешенного содержимого можно найти в официальной документации.

Марти ЧЖАН
источник
Выше возникла синтаксическая ошибка. В частности, атрибуты стиля должны быть установлены с помощью фигурных скобок {} вместо скобок ()
kamelkev
Привет, kamelkev, мой ответ для классов , а не для стилей , согласно вопросу. В основном это то, что я использую, и не думаю, что в нем есть ошибка.
Marty ZHANG
Спасибо за ответ, вы *[id](*)сделали трюк, я пробовал *[id,class]раньше, но это каким-то образом не позволяет использовать атрибут класса. Документы CKeditor немного похожи на лабиринт.
GDmac
1
+1 Понимание правил контента, вероятно, является лучшим решением, чем отключение всей фильтрации, как предлагают многие другие ответы.
Майкл Мартин-Смакер
10

если вы используете ckeditor 4.x, вы можете попробовать

config.allowedContent = true;

если вы используете ckeditor 3.x, у вас может быть эта проблема .

попробуйте поместить следующую строку в config.js

config.ignoreEmptyParagraph = false;
Васиф Батт
источник
config.ignoreEmptyParagraph=false;- единственное решение, которое сработало для меня, из всех ответов, которые я пробовал. Спасибо.
Стефан
9

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

config.allowedContent = true;
Мари Селван
источник
4

Если вы используете 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.

пиретта
источник
Спасибо за этот ответ drupal
relipse
3

Ниже приведен полный пример для CKEDITOR 4.x :

HTML

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

СЦЕНАРИЙ

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

Приведенный выше код разрешит использование всех тегов в редакторе.

Подробнее: Правила разрешенного содержимого CK EDITOR

Санчит Гупта
источник
0

Я обнаружил, что переход на использование полного HTML вместо отфильтрованного HTML (под редактором в раскрывающемся списке «Текстовый формат») - вот что решило эту проблему для меня. В противном случае стиль исчез бы.

cdavidyoung
источник
0

Я хотел бы добавить этот config.allowedContent = true; нужно добавить в файл ckeditor.config.js, а не в config.js, config.js ничего не сделал для меня, но добавление его в верхнюю область ckeditor.config.js сохранило мои классы div

Alpdog14
источник
0

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

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

facebook = span.icon-facebook2

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

Даниэль
источник
0

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

 CKEDITOR.on('instanceReady', function (ev) {
        ev.editor.pasteFilter.disabled = true;
    });
pandian_Snkl
источник