OSCHINA-MIRROR/pylixm-django-mdeditor

Django-mdeditor — это приложение в виде плагина для редактора Markdown для Django, основанное на Editor.md.

Django-mdeditor был вдохновлён замечательным django-ckeditor.

Примечание:

Для проблем с рендерингом страниц Markdown рекомендуется рендеринг на стороне сервера. Поскольку Editor.md долгое время не обновлялся, некоторые ошибки и проблемы совместимости необходимо отлаживать. Конечно, студенты, работающие на стороне клиента, могут выбрать этот вариант.
Что касается конфликта Jquery, его нельзя удалить, поскольку он требуется серверной части администратора. Рекомендуется отделить страницу редактирования на отдельной странице или на полноэкранном режиме напрямую, используя собственный статический файл, чтобы отличить её от других страниц.

Особенности

Почти все функции Editor.md:
- Поддержка Standard Markdown / CommonMark и GFM (GitHub Flavored Markdown);
- Полнофункциональный: предварительный просмотр в реальном времени, загрузка изображений (кросс-домен), вставка предварительно отформатированного текста/блоков кода/таблиц, поиск и замена, темы, многоязычность;
- Дополнительные функции Markdown: поддержка оглавления (Table of Contents), эмодзи;
- Поддержка TeX (выражения LaTeX, основанные на KaTeX), блок-схемы и диаграммы последовательности расширенного синтаксиса Markdown;
Можно настроить панель инструментов Editor.md;
Поле MDTextField предоставляется для модели и может отображаться непосредственно в администраторе Django;
MDTextFormField предоставляется для формы и ModelForm;
MDEditorWidget предоставляется для пользовательского виджета администратора.

Быстрый старт

Установка.

pipenv install django-mdeditor
# или
pip install django-mdeditor

Добавьте mdeditor в настройки INSTALLED_APPS следующим образом:

INSTALLED_APPS = [
...
'mdeditor',
]

Добавьте настройки фрейма для django3.0+:

X_FRAME_OPTIONS = 'SAMEORIGIN'

Добавьте URL-адрес «media» в свои настройки следующим образом:

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

Создайте папку uploads/editor в своём проекте для медиафайлов. 5. Добавьте 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:
# статические файлы (изображения, css, javascript и т. д.)
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
Запустите python manage.py makemigrations и python manage.py migrate, чтобы создать свои модели.
Войдите в администратор, вы увидите поле редактора Markdown, подобное этому:

/screenshot/admin-example.png

Использование

Редактирование полей в модели с помощью Markdown

Используя Markdown для редактирования полей в модели, мы просто заменяем TextField модели на MDTextField.

from django.db import models
from mdeditor.fields import MDTextField

class ExampleModel (models.Model):
    name = models.CharField (max_length = 10)
    content = MDTextField ()

Администратор на заднем плане автоматически отобразит редактирование форматированного текста Markdown.

Используется во внешнем шаблоне, можно использовать следующим образом:

{% load staticfiles %}
<! DOCTYPE ### Редактирование полей в форме с помощью markdown

Используйте markdown для редактирования полей в форме, используйте `MDTextFormField` вместо `forms.CharField`, следующим образом:
```python
from mdeditor.fields import MDTextFormField

class MDEditorForm (forms.Form):
    name = forms.CharField ()
    content = MDTextFormField ()

ModelForm может автоматически преобразовывать соответствующее поле модели в поле формы, которое можно использовать обычным образом:

class MDEditorModleForm (forms.ModelForm):

    class Meta:
        model = ExampleModel
        fields = '__all__'

Использование виджета markdown в админке

Используйте виджет 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 = {
    'default':{
        'width': '90% ',  # Ширина поля редактирования
        'height': 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_folder': 'editor',  # Папка для сохранения изображений
        'theme': 'default',  # Тема поля редактирования, dark / default
        'preview_theme': 'default',  # Тема области предварительного просмотра, dark / default
        'editor_theme': 'default',  # Тема редактируемой области, pastel-on-dark / default
        'toolbar_autofixed': True,  # Фиксируется ли панель инструментов по умолчанию
        'search_replace': True,  # Открывается ли поиск и замена
        'emoji': True,  # Открываются ли эмодзи
        'tex': True,  # Открывается ли функция диаграммы tex
        'flow_chart': True,  # Открывается ли диаграмма потока
        'sequence': True, # Открывается ли последовательная диаграмма
        'watch': True,  # Предварительный просмотр в реальном времени
        'lineWrapping': False,  # Перенос строк
        'lineNumbers': False,  # Номера строк
        'language': 'zh'  # zh / en / es
    }
}

Обратная связь

Добро пожаловать в использование и обратную связь!

Вы можете создать проблему или присоединиться к группе QQ.

Ссылка

django-ckeditor