Плагин DataFilter позволяет управлять фильтрацией HTML тегов. Он является «родным» для CKE плагином, так что ничего дополнительно устанавливать не нужно. Рассмотрим как им можно управлять на уровне кастомного плагина.
Допустим, вы хотите разрешить определенные классы для тега div — className1 и className2.
Сначала нужно убедиться, что DataFilter доступен, а потом использовать его для настройки фильтрации. В коде это будет выглядеть следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
/** * @file * Defines the plugin. */ import {Plugin} from 'ckeditor5/src/core'; /** * The editing feature. * * @extends module:core/plugin~Plugin */ export default class DummyEditing extends Plugin { /** * @inheritDoc */ init() { const editor = this.editor; // Убедимся, что htmlSupport доступен const htmlSupport = editor.plugins.get('DataFilter'); if (!htmlSupport) { console.warn('DataFilter plugin is not available!'); } else { const classes_div = 'className1 className2'; // далее разрешим классы для div // обернем в еще одну функцию this._addClassSupport('span', classes_div); } } _addClassSupport(tag, classes) { const htmlSupport = this.editor.plugins.get('DataFilter'); const classesList = classes.split(/[\s,]+/); if (classesList[0] == '') return; htmlSupport.allowAttributes({ name: tag, classes: RegExp('^(' + classesList.join('|') + ')$'), }); } } |
Функция _addClassSupport разбирает имена классов, превращая их в регулярное выражение. Нам нужно сформировать пакет настроек соответствующий MatcherPattern структуре.
Условие classes позволяет пройти по всем классам html тега и проверить на соответствие регулярному выражению, которое мы составили на основе нашего набора классов.
MatcherPattern позволяет создать правила для любых атрибутов и стилей. Детали можно изучить в документации CKE5 API.