Python中如何在Django项目集成SimpleMDE Markdown编辑器工具栏?

django 怎么集成一个 markdown 的那个工具栏?
要是用那个 simplemde 的 markdown 编辑器.有什么教程不?

我看他说要安装
$ bower install simplemde --save
$ npm install simplemde --save

这个怎么在 linux 与 windows 上安装?

那位朋友给个教珵或说说怎么集成在 django 里面?

谢谢了
Python中如何在Django项目集成SimpleMDE Markdown编辑器工具栏?

6 回复

markdown 编辑器其实跟 django 没有关系,完全是前端的插件。


在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 做渲染,基本就足够了

之前写过将就着可以用的轮子:[django 集成 editor.md]( https://github.com/fcfangcc/django-editor-md)

回到顶部