Расширение Hallojs в Django Wagtail с помощью кнопки Edit Source

Я был в состоянии добавить кнопку источника «Редактировать Html» в свой редактор с помощью следующего крючка:

@hooks.register('insert_editor_js')
def enable_source():
    return format_html(
        """
        <script>
            registerHalloPlugin('hallohtml');
        </script>
        """
    )

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

введите здесь описание изображения

Все кнопки, за исключением отсутствия значка, позволяют редактору исходного кода работать отлично. Спасибо за помощь.


django django-models wagtail django-templates wagtail-snippet
person Charles Smith    schedule 07.07.2016    source источник
comment
Если вам нужно редактировать поля форматированного текста на уровне необработанного HTML, почти наверняка есть что-то, что вы должны сделать лучше в своей модели данных — поля форматированного текста предназначены только для простого форматирования текста. Если вы пытаетесь сделать макеты / шрифты и т. д., это работа дизайнера шаблонов; если вы пытаетесь встроить таблицы/диаграммы и т. д., посмотрите на StreamField (torchbox.com/blog/rich-text-fields-and-faster-horses, docs.wagtail.io/en/v1.5.2/topics/streamfield.html).   -  person gasman    schedule 07.07.2016
comment
Спасибо .. Я уже использую Streamfield, но упустил из виду, что он не добавляет никаких предопределенных стилей, поэтому размещение моего пользовательского контента прекрасно вписывается на страницу. Если вы разместите свой комментарий в качестве ответа, я приму его. Еще раз спасибо - любимая трясогузка!!   -  person Charles Smith    schedule 07.07.2016
comment
С помощью плагина Studio Rooster сможет вставлять неразрывные пробелы, нижние и верхние индексы, привязки с целевым атрибутом (если он добавляет 'a': attribute_rule({'href': check_url, 'target': True}) к whitelist_element_rules), тире и т. д. Все это не касается макетов, шаблонов, таблиц. или диаграммы.   -  person Mike O'Connor    schedule 20.07.2017

Ответы (1)


arrow_upward
1
arrow_downward

Используйте хук insert_editor_css для предоставления дополнительных файлов CSS. к редактору.

@hooks.register('insert_editor_css')
def editor_css():
    return format_html(
        '<link rel="stylesheet" href="{}">',
        static('demo/css/editor-overrides.css')
    )

В JS-плагине hallohtml назначьте icon-hallohtml кнопке и используйте следующий CSS, чтобы придать ей стиль с символом H:

.hallotoolbar .halloformat .ui-button-text .icon-hallohtml:before {
    content:'H';
}
person jmwicks    schedule 29.07.2016