Я использую 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. Узнать больше о:
источник
Я нашел решение.
Это отключает фильтрацию, работает, но не очень хорошая идея ...
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 v4.1, вы можете сделать это в config.js CKEditor:
CKEDITOR.editorConfig = function( config ) { config.extraAllowedContent = '*[id](*)'; // remove '[id]', if you don't want IDs for HTML tags }
Подробный синтаксис правил разрешенного содержимого можно найти в официальной документации.
источник
*[id](*)
сделали трюк, я пробовал*[id,class]
раньше, но это каким-то образом не позволяет использовать атрибут класса. Документы CKeditor немного похожи на лабиринт.если вы используете ckeditor 4.x, вы можете попробовать
config.allowedContent = true;
если вы используете ckeditor 3.x, у вас может быть эта проблема .
попробуйте поместить следующую строку в config.js
config.ignoreEmptyParagraph = false;
источник
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; });
источник