Python中如何在Django项目集成SimpleMDE Markdown编辑器工具栏?
django 怎么集成一个 markdown 的那个工具栏?
要是用那个 simplemde 的 markdown 编辑器.有什么教程不?
我看他说要安装
$ bower install simplemde --save
$ npm install simplemde --save
这个怎么在 linux 与 windows 上安装?
那位朋友给个教珵或说说怎么集成在 django 里面?
谢谢了
Python中如何在Django项目集成SimpleMDE Markdown编辑器工具栏?
在Django项目里集成SimpleMDE的Markdown编辑器,主要就是处理好静态文件、表单字段和模板渲染。下面我直接给你一个能跑的完整例子。
首先,安装SimpleMDE。你可以用CDN,也可以下载到本地。这里假设你用CDN,方便点。
1. 创建或修改你的Django表单
在你的forms.py里,创建一个用Textarea的字段,然后给它加上SimpleMDE需要的CSS类。
# forms.py
from django import forms
class ArticleForm(forms.Form):
title = forms.CharField(max_length=200)
# 关键在这里:widget用Textarea,并设置attrs加入'simplemde'类
content = forms.CharField(
widget=forms.Textarea(attrs={'class': 'simplemde', 'rows': 20})
)
2. 在模板中引入SimpleMDE的CSS和JS
在你的HTML模板文件(比如article_form.html)的头部和尾部加入这些。记得用正确的CDN链接。
<!-- article_form.html -->
<!DOCTYPE html>
<html>
<head>
<!-- 引入SimpleMDE CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
</head>
<body>
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">提交</button>
</form>
<!-- 先引入jQuery(SimpleMDE依赖),再引入SimpleMDE JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
<script>
// 初始化所有带有'simplemde'类的textarea
document.querySelectorAll('textarea.simplemde').forEach(function(textarea) {
new SimpleMDE({
element: textarea,
// 你可以在这里配置各种选项,比如:
// spellChecker: false,
// autosave: { enabled: true, uniqueId: "MyUniqueID" },
});
});
</script>
</body>
</html>
3. 在视图中使用这个表单
在你的views.py里,正常使用这个表单就行。
# views.py
from django.shortcuts import render
from .forms import ArticleForm
def create_article(request):
if request.method == 'POST':
form = ArticleForm(request.POST)
if form.is_valid():
# 处理你的数据,比如保存到数据库
# title = form.cleaned_data['title']
# content = form.cleaned_data['content']
return render(request, 'success.html')
else:
form = ArticleForm()
return render(request, 'article_form.html', {'form': form})
4. 配置URL
在urls.py里把视图挂上去。
# urls.py
from django.urls import path
from . import views
urlpatterns = [
path('create/', views.create_article, name='create_article'),
]
跑起来之后,访问对应的URL(比如/create/),那个content文本框就会变成一个功能齐全的SimpleMDE Markdown编辑器了。你写的Markdown内容在表单提交后,会以纯文本形式在form.cleaned_data['content']里拿到。
总结一下:核心就是给Textarea加个特定class,然后在模板里用JS初始化。
你怎么集成 jQuery 就怎么集成这个
网站上说安装方法有 3 个,你忽略了第 3 种。
django-pagedown,貌似比较老了,不过自己调整一下模版,配合 django-markdown-deux 做渲染,基本就足够了


