Я використовую 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 - навіщо вам потрібен фільтр вмісту.
• Розширений фільтр вмісту - в глибокому описі механізму фільтрації.
• Дозволені правила вмісту - як писати дозволені правила вмісту.

Я знайшов рішення.

Це вимикає фільтрацію, працює, але не дуже гарна ідея ...

config.allowedContent = true;

Грати з рядком вмісту відмінно підходить для id тощо, але не для атрибутів класу та стилю, тому що у вас є () та {} для фільтрування класів та стилів.

Тож я можу зробити ставку на те, що будь-який клас у редакторі:

config.extraAllowedContent = '*(*)';

Це дозволяє будь-якому класу та будь-якому стилю inline.

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 в друпалі.

Я знайшов рішення, яке не потребує зміни файлу ckeditor js.

ця відповідь копіюється звідси . всі кредити повинні надходити до оригіналу автора.

Перейдіть до "Адміністратора >> Конфігурація >> 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.The видалити всі теги unnessary Що ми використовуємо в текстовому вмісті. Використання цієї команди у вашому файлі config.js повинно вимкнути цей ACK.

config.allowedContent = true;

Будь ласка , зверніться до офіційного Advanced Content Filter керівництво і плагін інтеграції підручник .

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

Якщо ви використовуєте Drupal AND модуль під назвою "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 зберігав мої класи дів

Ще один варіант, якщо використовувати drupal - просто додати стиль css, який ви хочете використовувати. таким чином він не викреслює назву стилю чи класу.

тож у моєму випадку на вкладку css в drupal 7 просто додайте щось подібне

facebook = span.icon-facebook2

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

Я стикаюся з тією ж проблемою, що стосується хромування з ckeditor 4.7.1. Просто відключіть pasteFilter на ckeditor instanceReady.Це властивість відключить усі параметри фільтра заздалегідь встановленого фільтра вмісту (ACF).

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