![图片[1]-Django项目中Markdown编辑器的两种实现方法-山海云端论坛](https://www.shserve.cn/wp-content/uploads/2023/12/20231214160420905-image.png)
安装与配置 django-mdeditor：
<code>pip install django-mdeditor</code>在 settings.py 中添加配置：
<code>INSTALLED_APPS = [ ... 'mdeditor', ] X_FRAME_OPTIONS = 'SAMEORIGIN'</code>添加路由和配置媒体文件：
<code>urlpatterns = [ ... url(r'mdeditor/', include('mdeditor.urls')), ] if settings.DEBUG: urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)</code>创建模型并在 admin.py 注册：
<code>from django.db import models from mdeditor.fields import MDTextField class ExampleModel(models.Model): name = models.CharField(max_length=10) content = MDTextField(verbose_name='内容')</code>在模板中使用：
<code>{% 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></code>使用 markdown 编辑 Form 字段：
<code>from mdeditor.fields import MDTextFormField class MDEditorForm(forms.Form): name = forms.CharField() content = MDTextFormField()</code>在 admin.py 中使用 markdown 小部件：
<code>from django.contrib import admin from django.db import models from mdeditor.widgets import MDEditorWidget class ExampleModelAdmin(admin.ModelAdmin): formfield_overrides = { models.TextField: {'widget': MDEditorWidget} } admin.site.register(ExampleModel, ExampleModelAdmin)</code>配置 markdown 自定义工具（在 settings.py 中添加配置）：
<code>MDEDITOR_CONFIGS = { 'default': { 'width': '90%', 'height': 500, 'toolbar': ["undo", "redo", "|", "bold", "del", "italic", "|", "h1", "h2", "h3", "|", "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', 'preview_theme': 'default', 'editor_theme': 'default', 'toolbar_autofixed': True, 'search_replace': True, 'emoji': True, 'tex': True, 'flow_chart': True, 'sequence': True, 'watch': True, 'lineWrapping': False, 'lineNumbers': False, 'language': 'zh' } }</code>方法二：静态文件方式（使用 Editor.md）
下载并解压 Editor.md 静态文件到 Django 项目的静态目录下：
在需要使用的页面中引入 CSS 和 JS 文件
<code><link rel="stylesheet" href="{% static 'plugins/editor_md/css/editormd.css' %}"> <script src="{% static 'plugins/editor_md/editormd.min.js' %}"></script></code>定义包裹 textarea 的 div，并初始化 Markdown 编辑器：
<code><div id="editor"> <textarea>.....</textarea> </div> <script> $(function(){ initEditorMd(); }) function initEditorMd(){ editormd('editor', { placeholder: "请输入内容", height: 500, path: "{% static 'plugins/editor_md/lib/' %}", imageUpload: true, imageFormats: ['jpg', 'jpeg', 'png', 'gif'], imageUploadURL: "{% url 'upload_url' %}" }); } </script></code>实现预览功能：
在预览页面中引入相关文件
<code><link rel="stylesheet" href="{% static 'plugins/editor_md/css/editormd.preview.css' %}"> <script src="{% static 'plugins/editor_md/lib/marked.min.js' %}"></script> <script src="{% static 'plugins/editor_md/lib/prettify.min.js' %}"></script> <script src="{% static 'plugins/editor_md/lib/raphael.min.js' %}"></script> <script src="{% static 'plugins/editor_md/lib/underscore.min.js' %}"></script> <script src="{% static 'plugins/editor_md/lib/sequence-diagram.min.js' %}"></script> <script src="{% static 'plugins/editor_md/lib/flowchart.min.js' %}"></script> <script src="{% static 'plugins/editor_md/lib/jquery.flowchart.min.js' %}"></script> <script> $(function(){ initEditorMd(); initPreviewMarkdown(); }) function initPreviewMarkdown(){ editormd.markdownToHTML("previewMarkdown", { htmlDecode: "style,script,iframe" }); } </script></code>本地文件上传配置（在初始化方法中添加相应参数）：
<code>function initEditorMd(){ editormd('editor', { // 其他参数... imageUpload: true, imageFormats: ['jpg', 'jpeg', 'png', 'gif'], imageUploadURL: "{% url 'upload_url' %}" }); }</code>通过上述两种方法，您可以选择适合您项目需求的 Markdown 编辑器集成方式。
© 版权声明
THE END
![表情[qiudale]-山海云端论坛](https://www.shserve.cn/wp-content/themes/Shanhai/img/smilies/qiudale.gif)
我也是买了领不了、
暂无评论内容