Markdown Editor와 Django Admin 통합

Django-mdeditor는 Editor.md에 기반한 django용 Markdown Editor 플러그인 응용 프로그램입니다.

특징

거의 Editor.md 기능

표준 Markdown/CommonMark 및 GFM(GitHub Flavored Markdown) 지원

전체 기능: 실시간 미리보기, 이미지(도메인 간) 업로드, 미리 서식이 지정된 텍스트/코드 블록/표 삽입, 검색 바꾸기, 테마, 다국어;

마크다운 추가 기능: ToC(목차), 이모티콘 지원;

TeX(LaTeX 표현식, KaTeX 기반), 흐름도 및 Markdown 확장 구문의 시퀀스 다이어그램을 지원합니다.

Editor.md 도구 모음을 구성할 수 있음

MDTextField 필드가 모델에 제공되며 django admin에 직접 표시될 수 있습니다.

Form 및 ModelForm에 대해 MDTextFormField가 제공됩니다.

관리 사용자 정의 위젯에 대해 MDEditorWidget이 제공됩니다.

설치

현재django-mdeditor는 최대v0.1.20입니다.

pip install django-mdeditor

구성

mdeditor를 INSTALLED_APPS에 추가하여 앱에서 사용할 수 있도록 합니다.

#settings.py

INSTALLED_APPS = [
    ...
    'mdeditor',
]

settings.py 파일 끝에 아래 구성을 추가합니다. 필요에 따라 수정할 수 있습니다. 참고로 공식docs을 참조하십시오.

#settings.py

# add frame settings for django3.0+ like this：
X_FRAME_OPTIONS = 'SAMEORIGIN'

MDEDITOR_CONFIGS = {
    'default': {
        'width': '100% ',  # Custom edit box width
        'height': 700,  # Custom edit box height
        'toolbar': ["undo", "redo", "|",
                    "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|",
                    "h1", "h2", "h3", "h5", "h6", "|",
                    "list-ul", "list-ol", "hr", "|",
                    "link", "reference-link", "image", "code", "preformatted-text", "code-block", "table", "datetime",
                    "emoji", "html-entities", "pagebreak", "goto-line", "|",
                    "help", "info",
                    "||", "preview", "watch", "fullscreen"],  # custom edit box toolbar
        # image upload format type
        'upload_image_formats': ["jpg", "jpeg", "gif", "png", "bmp", "webp", "svg"],
        'image_folder': 'editor',  # image save the folder name
        'theme': 'default',  # edit box theme, dark / default
        'preview_theme': 'default',  # Preview area theme, dark / default
        'editor_theme': 'default',  # edit area theme, pastel-on-dark / default
        'toolbar_autofixed': False,  # Whether the toolbar capitals
        'search_replace': True,  # Whether to open the search for replacement
        'emoji': True,  # whether to open the expression function
        'tex': True,  # whether to open the tex chart function
        'flow_chart': True,  # whether to open the flow chart function
        'sequence': True,  # Whether to open the sequence diagram function
        'watch': True,  # Live preview
        'lineWrapping': True,  # lineWrapping
        'lineNumbers': True,  # lineNumbers
        'language': 'en'  # zh / en / es
    }
}

# enabling media uploads
MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')
MEDIA_URL = '/media/'

업데이트urls.py를 통해 URL 추가

from django.conf.urls import url, include
from django.conf.urls.static import static
from django.conf import settings
...

urlpatterns = [
    ...
    url(r'mdeditor/', include('mdeditor.urls'))
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

용법

마크다운 편집기를 활성화하려는 모델 필드에 MDTextField를 추가합니다.

from mdeditor.fields import MDTextField

class Blog(models.Model):
    """Blog model """
    ...
    body = MDTextField(null=True, blank=True)

변경 사항을 반영하도록 마이그레이션

python3 manage.py makemigrations && python3 manage.py migrate

이제 관리자 패널에 로그인하여 실제로 작동하는지 확인하십시오.


짜잔!

읽어주셔서 감사합니다! 이것이 관리자 패널에서 마크다운 편집기를 활성화하려는 모든 사람에게 도움이 되었기를 바랍니다.

행복한 학습!