Расширение редактора Hallo

WAGTAILADMIN_RICH_TEXT_EDITORS = {
    'default': {
        'WIDGET': 'wagtail.admin.rich_text.HalloRichTextArea'
    }
}

Функциональность устаревшего редактора hallo.js может быть расширена с помощью плагинов. Сведения о разработке пользовательских hallo.js плагинов см. на странице проекта: https://github.com/bergie/hallo

После создания плагина его необходимо зарегистрировать через метод реестра функций register_editor_plugin(editor, feature_name, plugin). Для hallo.js плагина параметр editor всегда должен быть 'hallo'.

Плагин halloblockquote, реализованный в myapp/js/hallo-blockquote.js, который добавляет поддержку тега <blockquote>, был бы зарегистрирован под именем функции block-quote следующим образом:

from wagtail.admin.rich_text import HalloPlugin
from wagtail.core import hooks

@hooks.register('register_rich_text_features')
def register_embed_feature(features):
    features.register_editor_plugin(
        'hallo', 'block-quote',
        HalloPlugin(
            name='halloblockquote',
            js=['myapp/js/hallo-blockquote.js'],
        )
    )

Конструктор для HalloPlugin принимает следующие ключевые аргументы:

• name — имя плагина, определенное в коде JavaScript. hallo.js имена плагинов имеют префикс "IKS." пространства имен, но имя, переданное здесь, должно быть без префикса.
• options — словарь (или другой сериализуемый в JSON объект) параметров, которые будут переданы коду JavaScript-плагина при инициализации
• js — список файлов JavaScript, которые нужно импортировать для этого плагина, определенный так же, как и определение медиа медиа Django форм
• css — словарь файлов CSS, которые нужно импортировать для этого плагина, определенный так же, как и определение медиа медиа Django форм
• order — индексный номер (по умолчанию 100), определяющий порядок отображения плагинов, что, в свою очередь, определяет порядок отображения кнопок в панели инструментов

При написании кода front-end для плагина реализация Hallo от Wagtail предлагает две точки расширения:

• В JavaScript используйте селектор атрибута [data-hallo-editor] для выбора редактора, например var editor = document.querySelector('[data-hallo-editor]');.
• В CSS используйте селектор класса .halloeditor.

Безопасное использование элементов rich text

После расширения редактора для поддержки нового HTML-элемента, вам нужно добавить его в белый список разрешенных элементов — стандартное поведение Wagtail заключается в удалении нераспознанных элементов, чтобы предотвратить вставку стилей и скриптов (намеренно или непреднамеренно через копирование-вставку) редакторами, которые разработчик не учел.

Элементы можно добавить в белый список через метод реестра функций register_converter_rule(converter, feature_name, ruleset). Когда используется редактор hallo.js параметр converter всегда должен быть 'editorhtml'.

Следующий код добавит элемент <blockquote> в белый список, когда активна функция block-quote:

from wagtail.admin.rich_text.converters.editor_html import WhitelistRule
from wagtail.core.whitelist import allow_without_attributes

@hooks.register('register_rich_text_features')
def register_blockquote_feature(features):
    features.register_converter_rule('editorhtml', 'block-quote', [
        WhitelistRule('blockquote', allow_without_attributes),
    ])

WhitelistRule получает имя элемента и вызываемый объект, который выполнит некоторое преобразование элемента при его встрече. Этот вызываемый объект получает элемент как объект тега BeautifulSoup.

Модуль wagtail.core.whitelist предоставляет несколько вспомогательных функций для определения этих обработчиков: allow_without_attributes, обработчик, который сохраняет элемент, но удаляет все его атрибуты, и attribute_rule , который принимает словарь, определяющий, как обрабатывать каждый атрибут, и возвращает функцию-обработчик. Этот словарь будет сопоставлять имена атрибутов либо со значением True (указывает, что атрибут должен быть сохранен), либо со значением False (указывает, что атрибут должен быть удален), либо с вызываемым объектом (который принимает начальное значение атрибута и возвращает либо конечное значение для атрибута, либо None для удаления атрибута).