A small library allows you to integrate the page builder "grapesjs" into django admin
pip install django_grapesjsThen add it to your INSTALLED_APPS:
INSTALLED_APPS = (
'django_grapesjs',
...
'django.contrib.admin',
)To work with the "template_choices", need to add a url-template in the urls.py file
urlpatterns = [
path('get_template/', GetTemplate.as_view(), name='dgjs_get_template'),
]Just import the field and add to your model
from django.db import models
from django_grapesjs.models import GrapesJsHtmlField
class ExampleModel(models.Model):
html = GrapesJsHtmlField()
...
# default_html - path to the html file to display the default value
# for the field when the form page is received
html = GrapesJsHtmlField(default_html='default.html')
# or default - if the page is simply static
html = GrapesJsHtmlField(default=render_to_string('default.html'))
...
# use the redactor_config argument to select the configuration of the editor
# Available:
# - redactor_config='base' - basic setting, most widgets are used
# - redactor_config='min' - minimum setting, only the most necessary
html = GrapesJsHtmlField(redactor_config='base')
...
# use apply_django_tag = True, if you want to apply render django or jinja tags
html = GrapesJsHtmlField(default_html='default.html', apply_django_tag=True)
...
# use template_choices to select multiple templates
html = GrapesJsHtmlField(template_choices=(('django_grapesjs/default.html', 'default'),))And then inherit "GrapesJsAdminMixin", in the admin class of the current model
from django.contrib import admin
from django_grapesjs.admin import GrapesJsAdminMixin
@admin.register(ExampleModel)
class ExampleAdmin(GrapesJsAdminMixin, admin.ModelAdmin):
passYou can use special tags in your templates, for flexible customization
<ignore></ignore>If you need to comment out some of the html code during the save, but execute or display at the time editing in page builder - use this tag. For example, if your template that uses django or jinja tags does not have any styles or javascript (because they are in another place, for example, in "footer.html"), you can put css and js in this tag, styles and javascript code in the editor will work, but when saved and used on the site there will not be repeating fragments
<hidden></hidden>If you are editing in the editor with apply_django_tag, you might be distracted by the additional: {% exclude %}, {% include %}, {% for <expression> %}, etc; - use this tag. He temporarily hides information, embedded in it during editing, and during the save returns to the original form
# True if you want to save html and css
GRAPESJS_SAVE_CSS = False # default value
# use the value of the field from the db - True, or use the global save editor
GRAPESJS_DEFAULT_MODELS_DATA = True # default value
# redefine the path to the html file, the markup from this file will be used by default
GRAPESJS_DEFAULT_HTML = 'django_grapesjs/default.html' # default value
# Add or redefine the configuration of the editor
REDACTOR_CONFIG = {'base': 'django_grapesjs/redactor_config/base.html'} # default valuethe library does not work in "inlines"
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent