一、安装富文本编辑器
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 render
def 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>
我们需要把这个文件导入到我们的静态文件夹下
当然没有这个文件的可以在此处下载,也可以从库中拉取
https://download.csdn.net/download/weixin_43903639/80123049