2ik / django-editorjs-fields

Django plugin for using Editor.js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Вывод в шаблонах django

tserashchuk opened this issue · comments

Как использовать EditorJsTextField в шаблонах django? Спасибо

commented

Добрый день! EditorJsTextField хранит в БД просто json строку, поэтому перед выводом в шаблоне ее нужно преобразовать в html код. Я посчитал что не стоит делать готовую реализацию, а возложить эту идею на разработчика, т.к. каждый может использовать данный плагин на свое усмотрение. Я уже думал над тем чтобы написать инструкцию для быстрой интеграции с шаблоном и, скорее всего, я ее напишу скоро.

Сейчас, например, можно реализовать кастомный фильтр для шаблона или в вашем views.py взять editorjs поле и преобразовать его в html код, пройдясь по всем блокам в цикле.

На одном проекте у меня как раз используется кастомный фильтр, но там только компоненты paragraph, Header и List.
Приведу пример:

/app/templatetags/editorjs.py

from django import template
from django.utils.safestring import mark_safe

register = template.Library()


def parse_paragraph(text):
    return f'<p>{text}</p>'


def parse_list(items):
    list_li = ''.join([f'<li>{item}</li>' for item in items])
    return f'<ul>{list_li}</ul>'


def parse_header(text, level):
    return f'<h{level}>{text}</h{level}>'


@register.filter(is_safe=True)
def editorjs(value):
    if not isinstance(value, dict):
        return value

    html_list = []
    for item in value['blocks']:
        if item['type'] == 'paragraph':
            html_list.append(parse_paragraph(
                item['data']['text'].replace('&nbsp;', ' ')))
        elif item['type'] == 'Header':
            html_list.append(parse_header(
                item['data']['text'].replace('&nbsp;', ' '), item['data']['level']))
        elif item['type'] == 'List':
            html_list.append(parse_list(item['data']['items']))
    return mark_safe(''.join(html_list))

/app/templates/example_detail.html

...
{{ editorjs_field|editorjs }}
...

Я не скажу что это лучший способ, но мне такая реализация показалась неплохой)

Not working yet

commented

Not working yet

code please

commented

added in 0.2.1