Wagtail hooks로 RichTextField에 구글 폰트 적용

Wagtail hooks를 사용하면 Admin Page의 세부요소들을 편리하게 관리를 할 수 있는 것 같다. 한번 시간을 내서 wagtail hooks에 대해서 공부해보려고 한다. 일단 RichTextField에 원하는 폰트를 적용하는 방법에 대해서 기술 하려고 한다. 

 

https://docs.wagtail.io/en/stable/advanced_topics/customisation/extending_draftail.html

Extending the Draftail Editor — Wagtail Documentation 2.14.1 documentation

wagtail 공식문서 draftail을 창고하였다.

 

wagtail_hooks.py

import wagtail.admin.rich_text.editors.draftail.features as draftail_features
from wagtail.admin.rich_text.converters.html_to_contentstate import (
    InlineStyleElementHandler
)
from wagtail.core import hooks
from django.templatetags.static import static
from django.utils.html import format_html, format_html_join


@hooks.register("register_rich_text_features")
def register_font_styling(features):

    # step 1
    feature_name = 'font-type'
    type_ = 'FONT-TYPE'
    tag = 'div'

    # step 2
    control = {
        "type": type_,
        "label": "F",
        "description": "Font-type",
        "style": {
            'font-family': "'Nanum Pen Script', cursive",
            'src': "url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap')",
        },
    }

    # step3
    features.register_editor_plugin(
        "draftail", feature_name, draftail_features.InlineStyleFeature(control)
    )

    db_conversion = {
        "from_database_format": {tag: InlineStyleElementHandler(type_)},
        "to_database_format": {"style_map": {type_:{"element": tag, 'props': {'class': 'font-type'}}}}
    }

    features.register_converter_rule("contentstate", feature_name, db_conversion)
    features.default_features.append(feature_name)

hooks에 관련 된 내용은 wagtail_hooks.py에 정리를 해 놓았다. 

 

여기서 몇가지 주의할 점이 있다면 tag는 p태그 대신 div 태그로 했다. p태그로 하니 richtext랑 충돌나는 부분이 있는 것 같아서 제대로 적용되지 않았다. 이후 div태그로 바꿔줘서 적용하니 정상적으로 작동 되었다.

 

p태그로 했을 때 저장은 되었지만 edit를 할 때 

End of block reached without closing inline style elements 오류가 발생하였다. p태그를 적용하게 되면 폰트 적용을 할때 줄바꿈이 일어나므로 오류가 생기는 것으로 파악하고 있다. p태그 이외는 정상적으로 적용이 된다. 태그는 상황에 맞게 바꿔서 사용을 하면 될 것으로 생각한다.

 

그리고 control 부분에 style을 살펴보면 폰트를 가져올 때, 원래라면 link 태그를 통해 css를 가져오나 여기선 style 내부에 정의를 해줘야 하므로 src로 가져왔다.