在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:django-mdeditor开源软件地址:https://gitee.com/pylixm/django-mdeditor开源软件介绍:django-mdeditorDjango-mdeditor 是基于 Editor.md 的一个 django Markdown 文本编辑插件应用。 Django-mdeditor 的灵感参考自伟大的项目 django-ckeditor. 注:
功能
快速入门
pip install django-mdeditor
INSTALLED_APPS = [ ... 'mdeditor', ]
X_FRAME_OPTIONS = 'SAMEORIGIN' # django 3.0 + 默认为 deny
MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')MEDIA_URL = '/media/' 在你项目根目录下创建
from django.conf.urls import url, includefrom django.conf.urls.static import staticfrom 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 modelsfrom mdeditor.fields import MDTextFieldclass ExampleModel(models.Model): name = models.CharField(max_length=10) content = MDTextField()
from django.contrib import adminfrom . import modelsadmin.site.register(models.ExampleModel)
到此,你已经初步体验了 用法说明在model 中使用 Markdown 编辑字段在model 中使用 Markdown 编辑字段,我们只需要将 model 的 from django.db import modelsfrom mdeditor.fields import MDTextFieldclass 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 编辑字段,使用 from mdeditor.fields import MDTextFormFieldclass MDEditorForm(forms.Form): name = forms.CharField() content = MDTextFormField()
class MDEditorModleForm(forms.ModelForm): class Meta: model = ExampleModel fields = '__all__' 在 admin 中使用 markdown 小组件在 admin 中使用 markdown 小组件,如下: from django.contrib import adminfrom django.db import models# Register your models here.from . import models as demo_modelsfrom mdeditor.widgets import MDEditorWidgetclass ExampleModelAdmin(admin.ModelAdmin): formfield_overrides = { models.TextField: {'widget': MDEditorWidget} }admin.site.register(demo_models.ExampleModel, ExampleModelAdmin) 自定义工具栏在 MDEDITOR_CONFIGS = {'default':{ '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_folder': '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, # 是否开启序列图功能 'watch': True, # 实时预览 'lineWrapping': False, # 自动换行 'lineNumbers': False # 行号 }} 反馈交流欢迎反馈和交流! 你可以创建 issue 或加入QQ 群。 参考 |
请发表评论