一、安装富文本编辑器
pip install django-tinymce
二、settings配置
2.1、安装app
INSTALLED_APPS = [...'tinymce',]
#富⽂本编辑器的配置TINYMCE_DEFAULT_CONFIG = {'theme':'advanced','width':600,'height':400}
三、前端页面
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>富文本</title><script src="/static/js/tiny_mce/tiny_mce.js"></script> <!--会去tinymce模块，按此路径寻找js文件--><script>tinyMCE.init({'mode': 'textareas', <!--定义textarea标签。否则在下面使用textarea标签 不会变为富文本-->'theme': 'advanced', <!--主题：高级-->'width': 450, <!--宽、高-->'height': 300})</script></head><body><h1>下面就是富文本框</h1><form action="{% url 'app:edit' %} " method="post">{% csrf_token %}<label><textarea name="comment_content">富文本</textarea> <!--使用上面定义的textarea标签--></label><br><input type="submit" value="提交评论" class="btn btn-default"></form></body></html>
四、Url配置
urlpatterns = [path('edit', views.edit, name='edit'),path('tinymce/', include('tinymce.urls')),]
五、视图函数配置
from django.shortcuts import renderdef edit(request):if request.method == 'POST':print(request.POST.get('comment_content'))return render(request,'article.html')
六、运行
此时你运行会发现，嗯，错的，富文本框并没有出现，这是因为下面这个标签中的js文件并未存在
<script src="/static/js/tiny_mce/tiny_mce.js"></script>
我们需要把这个文件导入到我们的静态文件夹下
当然没有这个文件的可以在此处下载，也可以从库中拉取
/download/weixin_43903639/80123049
![[Django学习] Django基础(8)_富文本编辑器](https://300zi.50zi.cn/uploadfile/img/16/13/4e983976b6375acd5d7ac3728da54ec2.jpg)
