예 쁜 Django Markdown 부 텍스트 app 플러그 인의 실현

django-mdeditor
Github 주소:https://github.com/pylixm/django-mdeditor시용 을 환영 합 니 다.star 소장!
Django-mditor 는Editor.md기반 django Markdown 텍스트 편집 플러그 인 응용 프로그램 입 니 다.
Django-mditor 의 영감 은 위대 한 프로젝트django-ckeditor를 참고 합 니 다.
기능.
  • Editor.md 대부분의 기능 지원
  • 표준 Markdown 텍스트,CommonMark,GFM(GitHub Flavored Markdown)텍스트 를 지원 합 니 다.
  • 실시 간 미리보기,이미지 업로드,포맷 코드,검색 교체,피부,다 중 언어 등 을 지원 합 니 다.
  • TOC 디 렉 터 리 와 표정 지원;
  • TeX,흐름 도,시차 도 등 도표 확장 을 지원 합 니 다.
  • Editor.md 도구 모음 을 사용자 정의 할 수 있 습 니 다.
  • 모델 필드 를 지원 하 는 MDTextField 필드 를 제공 합 니 다.
  • Form 과 ModelForm 을 지원 하 는 MDTextFormField 필드 를 제공 합 니 다.
  • admin 사용자 정의 스타일 사용 을 지원 하 는 MDEditor Widget 필드 를 제공 합 니 다.
  • 쾌속 입문
    설치 하 다.
    
    pip install django-mdeditor
    settings 프로필 에서 INSTALLEDAPPS 에 mdeditor 추가:
    
      INSTALLED_APPS = [
        ...
        'mdeditor',
      ]
    settings 에 미디어 파일 의 경로 설정 을 추가 합 니 다:
    
    MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')
    MEDIA_URL = '/media/'
    프로젝트 루트 디 렉 터 리 에 업로드/editor 디 렉 터 리 를 만 들 고 업로드 한 그림 을 저장 합 니 다.
    프로젝트 의 루트 urls.py 에 확장 url 과 미디어 파일 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:
      # static files (images, css, javascript, etc.)
      urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
    
    
    테스트 모델 작성:
    
    from django.db import models
    from mdeditor.fields import MDTextField
    
    class ExampleModel(models.Model):
      name = models.CharField(max_length=10)
      content = MDTextField()
    
    
    admin.py 에 모델 등록 하기:
    
    from django.contrib import admin
    from . import models
    
    admin.site.register(models.ExampleModel)
    
    python manage.py makemigrations 와 python manage.py migrate 를 실행 하여 model 데이터베이스 시트 를 만 듭 니 다.
    django admin 배경 에 로그 인하 여'추가'동작 을 누 르 면 다음 화면 을 볼 수 있 습 니 다.

    여기까지,당신 은 이미 djang-mdeditor 를 초보 적 으로 체험 하 였 으 니,이어서 그의 다른 사용 을 자세히 보 세 요.
    용법 설명
    model 에서 Markdown 편집 필드 사용 하기
    model 에서 Markdown 편집 필드 를 사용 합 니 다.model 의 TextField 를 MDTextField 로 바 꾸 면 됩 니 다.
    
    from django.db import models
    from mdeditor.fields import MDTextField
    
    class ExampleModel(models.Model):
      name = models.CharField(max_length=10)
      content = MDTextField()
    
    배경 admin 에 서 는 markdown 의 부 텍스트 편집 이 자동 으로 표 시 됩 니 다.
    전단 template 에서 사용 할 때 다음 과 같이 사용 할 수 있 습 니 다.
    
    {% load staticfiles %}
    <!DOCTYPE html>
    <html lang="zh">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
      </head>
      <body>
        <form method="post" action="./">
          {% csrf_token %}
          {{ form.media }}
          {{ form.as_p }}
          <p><input type="submit" value="post"></p>
        </form>
      </body>
    </html>
    Form 에서 markdown 편집 필드 사용 하기
    Form 에서 markdown 편집 필드 를 사용 하고 forms.CharField 대신 MDTextFormField 를 사용 합 니 다.다음 과 같 습 니 다.
    
    from mdeditor.fields import MDTextFormField
    
    class MDEditorForm(forms.Form):
      name = forms.CharField()
      content = MDTextFormField()
    
    
    ModelForm 은 model 에 대응 하 는 필드 를 form 필드 로 자동 으로 변환 하여 정상적으로 사용 할 수 있 습 니 다.
    
    class MDEditorModleForm(forms.ModelForm):
    
      class Meta:
        model = ExampleModel
        fields = '__all__'
    
    
    admin 에서 markdown 작은 구성 요 소 를 사용 합 니 다.
    admin 에서 markdown 작은 구성 요 소 를 사용 합 니 다.다음 과 같 습 니 다.
    
    from django.contrib import admin
    from django.db import models
    
    # Register your models here.
    from . import models as demo_models
    from mdeditor.widgets import MDEditorWidget
    
    
    class ExampleModelAdmin(admin.ModelAdmin):
      formfield_overrides = {
        models.TextField: {'widget': MDEditorWidget}
      }
    
    
    admin.site.register(demo_models.ExampleModel, ExampleModelAdmin)
    사용자 정의 도구 모음
    settings 에 다음 설정 을 추가 합 니 다:
    
    MDEDITOR_CONFIGS = {
      'width': '90%', #         
      'heigth': 500,  #         
      '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"], #          
      'upload_image_formats': ["jpg", "jpeg", "gif", "png", "bmp", "webp"], #         
      'image_floder': 'editor', #          
      'theme': 'default', #       ,dark / default
      'preview_theme': 'default', #       , dark / default
      'editor_theme': 'default', # edit    ,pastel-on-dark / default
      'toolbar_autofixed': True, #        
      'search_replace': True, #         
      'emoji': True, #         
      'tex': True, #      tex     
      'flow_chart': True, #          
      'sequence': True #          
    }
    레 퍼 런 스
    django-ckeditor
    이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

    좋은 웹페이지 즐겨찾기