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

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

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

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

<div>some content</div>

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

Ответ 1

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

Самое простое решение - это 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 – зачем нужен фильтр содержимого.
Расширенный фильтр содержимого – в глубоком описании механизма фильтрации.
Разрешенные правила контента – как писать допустимые правила контента.

Ответ 2

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

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

config.allowedContent = true;

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

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

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

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

Ответ 3

Так как CKEditor v4.1, вы можете сделать это в config.js CKEditor:

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

Вы можете сослаться на официальную документацию для подробного синтаксиса правил допустимого контента

Ответ 4

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

Я нашел решение, которое не требует изменения файла jc ckeditor.

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

Перейдите в "Admin → Configuration → CKEditor"; в разделе "Профили" выберите свой профиль (например, "Полный" ).

Измените этот профиль и в разделе "Дополнительные параметры → Конфигурация настраиваемого JavaScript" добавьте config.allowedContent = true;.

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

Ответ 5

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

config.allowedContent = true;

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

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

config.ignoreEmptyParagraph = false;

Ответ 6

Это называется ACF (Automatic Content Filter) в ckeditor.It удаляет все ненужные теги. Что мы используем в текстовом контенте. При использовании этой команды в файле config.js следует отключить этот ACK.

config.allowedContent = true;

Ответ 7

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

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

Ответ 8

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

Ответ 9

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

HTML

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

SCRIPT

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

Вышеприведенный код позволит всем тегам в редакторе.

Подробнее Подробнее: CK EDITOR Разрешенные правила контента

Ответ 10

Я обнаружил, что переключение на использование полного html вместо фильтра html (ниже редактора в раскрывающемся списке "Формат текста" ) - это то, что исправило эту проблему для меня. В противном случае стиль исчезнет.

Ответ 11

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

Ответ 12

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

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

facebook = span.icon-facebook2

также проверьте, включена ли кнопка стилей шрифтов

Ответ 13

Я сталкиваюсь с той же проблемой на хроме с ckeditor 4.7.1. Просто отключите pasteFilter на экземпляре экземпляра ckeditor. Это свойство отключает все параметры фильтра Advance Content Filter (ACF).

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