一个简单的 Django 应用程序来编辑降价文本。
项目描述
django-mdeditor
Django-mdeditor是基于Editor.md的django的 Markdown 编辑器插件应用程序。
Django-mdeditor的灵感来自伟大的django-ckeditor。
笔记：
- 对于 Markdown 页面渲染问题，建议使用后端渲染。因为
Editor.md很久没有更新了，所以需要调试一些bug和兼容性问题。当然，前端同学可以选择。 - 关于
Jquery冲突，不能删除，因为它是后台管理的要求。建议将编辑页面直接分开单页或全屏，使用自己的静态文件与其他页面区分开来。
特征
- 几乎 Editor.md 的功能
- 支持标准 Markdown/CommonMark 和 GFM（GitHub Flavored Markdown）；
- 功能齐全：实时预览、图片（跨域）上传、预格式化文本/代码块/表格插入、搜索替换、主题、多语言；
- Markdown Extras : 支持 ToC (Table of Contents), Emoji;
- 支持 TeX（LaTeX 表达式，基于 KaTeX）、Markdown 扩展语法的流程图和序列图；
- 可以自定义 Editor.md 工具栏
- MDTextField 字段是为模型提供的，可以直接在 django admin 中显示。
- 为 Form 和 ModelForm 提供了 MDTextFormField。
- 为管理自定义小部件提供了 MDEditorWidget。
快速开始
- 安装。
pipenv install django-mdeditor
# or
pip install django-mdeditor
- 添加
mdeditor到您的 INSTALLED_APPS 设置中，如下所示：
INSTALLED_APPS = [
...
'mdeditor',
]
- 为 django3.0+ 添加框架设置如下：
X_FRAME_OPTIONS = 'SAMEORIGIN'
- 将“媒体”网址添加到您的设置中，如下所示：
MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')
MEDIA_URL = '/media/'
uploads/editor在您的项目中为媒体文件创建文件夹。
- 像这样将 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 -
运行
python manage.py makemigrations并python manage.py migrate创建您的模型。 -
登录 Admin ，您可以看到一个降价编辑器文本字段，如下所示：
用法
使用 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 html>
<html lang = "en">
<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>
使用 Markdown 编辑表单中的字段
使用markdown编辑Form中的字段，使用MDTextFormFieldinstead of forms.CharField，如下：
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__'
在管理员中使用降价小部件
在管理员中使用 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% ', # Custom edit box width
'heigth': 500, # 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
'upload_image_formats': ["jpg", "jpeg", "gif", "png", "bmp", "webp"], # image upload format type
'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': True, # 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': False, # lineWrapping
'lineNumbers': False # lineNumbers
}
}
反馈
欢迎使用和反馈！
您可以创建问题或加入QQ群。
