CKEditor удаляет атрибут класса из таблицы

В моем <textarea> у меня есть этот текст:

<table class='table table-striped'>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>

После использования CKEDITOR.replace() моя текстовая область станет CKEditor, и в ней есть таблица. Проблема заключается в том, что CKEditor добавляет свой класс в мою таблицу под названием cke_show_border. Только атрибуты в этом классе применяются к таблице, ни один из моих классов не применяется.

Что мне делать, чтобы применить его к классу table и table-striped?

Спасибо за вашу помощь.

ОТВЕТЫ

Ответ 1

У меня была аналогичная проблема, когда открытие и сохранение с помощью CKEditor 7.x.1.13 в Drupal 7 заключалось в удалении атрибутов в моих HTML-элементах. Добавив следующее в "Конфигурация пользовательского JavaScript", он исправил его.

config.allowedContent = true;

Ответ 2

Как я вижу здесь, скорее всего, вы используете CKEditor 4.1 или новее, и ваша проблема Advanced Content Filter. Я предполагаю, что в вашем диалоговом окне таблицы нет вкладки "Дополнительно", а также нет плагина dialogadvtab в пакете редактора:

CKEDITOR.instances.yourInstance.plugins.dialogadvtab
> undefined

Правильно? Затем вам нужно настроить config.extraAllowedContent:

config.extraAllowedContent = `table[class]`;

Почему это так, вы можете спросить? Это связано с тем, что в редакторе нет feature (команда, кнопка, диалог, поле и т.д.), Добавляющая классы к <table> теги. Поэтому нет никакой функции, которая гласит:

"Эй, редактор, я собираюсь добавлять классы в таблицы, и вам должно быть здорово".

Фактически это делается путем определения allowedContent наряду с определением функции. Поэтому, если нет загруженного плагина dialogadvtab, который бы сообщил редактору, что таблицы могут идти с классами, редактор отбрасывает class атрибуты на выходе, поскольку они не поддерживаются какой-либо функцией.

Это поведение, чтобы ваша разметка была чистой и контролировала то, что создается редактором WYSIWYG. Тем не менее, это требует внимания и базового понимания.

См. мой предыдущий ответ на аналогичный вопрос: CKEditor автоматически разделяет классы из div

Ответ 3

Вы можете разрешить все: теги, классы, стили и атрибуты, установив

config.allowedContent = true;

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

config.extraAllowedContent = 'table(*)';

Чтобы узнать больше о синтаксисе правил, перейдите сюда: http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules-section-string-format

Ответ 4

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

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

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

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

Ответ 5

Добавить border = 1 в таблицу и таким образом CKEditor не будет устанавливать свой собственный класс в таблице (могут быть другие способы сделать это, но я всегда находил это проще, так как это не требует каких-либо изменений для CKEditor)

Ответ 6

Thsi - прекрасный пример использования версии CKeditor 4.0 и более поздней версии с нашим собственным стилем CSS.

  <script src="//cdn.ckeditor.com/4.5.9/standard-all/ckeditor.js"></script>



     var editor = CKEDITOR.replace("textarea", {
                        width: 750, height: 500, fullPage: true,
                        extraPlugins: 'stylesheetparser',

                        //// Do not load the default Styles configuration.
                        stylesSet: [],
                        on: {
                            instanceReady: function (evt) {
                            // Remove ckeditor table border
                            $("iframe").contents().find('body').removeClass('cke_show_borders');
                          }
                       }

                    });

Ответ 7

CKEditor удаляет стили, которые не находятся в файле styles.js. Чтобы CKEditor распознал класс и применил его к таблице, вам нужно добавить его в документ в /* Object Styles */.

{
name: 'Striped Table',
element: 'table',
attributes: { 'class': 'table table-striped'}
}

Даже если CKEditor пытается отключить его, вы можете выбрать таблицу, а затем выбрать свой стиль из раскрывающегося списка. Надеюсь, это поможет!