Django Ueditor
的安装和在admin
页面的使用请看,接下来的内容是基于这篇文章的环境进行的:使用 Django Ueditor 富文本编辑器(一),如果你按照下面的流程来做还有关于Ueditor
的报错,很有可能是没有装好环境。。
以文章模型为例
1、创建文章模型
2、创建该文章模型的Form
3、写个html界面
4、写个视图函数article(),并提供这个Form给前端渲染
5、写个路由,并配置好settings.py文件
from DjangoUeditor3.DjangoUeditor.models import UEditorField
class Article(models.Model):
title = models.CharField('标题', max_length=100)
content = UEditorField('内容', width=1000, height=500, toolbars="besttome")
# 这里不一定要用UEditorField,可以用TextField,这个对非admin界面来说无关紧要哈。
def __str__(self):
return self.title
然后数据迁移(如果报错,则请看上一篇文章):
python manage.py makemigrations
python manage.py migrate
在这里我只对该文章模型的富文本字段创建Form,方便前端个性化设计:
from django.forms import forms
from DjangoUeditor.forms import UEditorField
class ContentForm(forms.Form):
content = UEditorField("", height=500, width=830, toolbars='besttome')
拓展:这个toolbars有几种值:mini、normal、full、besttome,自己根据喜好使用哈,官方也提供了文档自己设计工具栏。
3、写个HTML界面:
<!DOCTYPE html>
<html lang="zh-hans">
<head>
<title>写文章</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
{{ content_form.media }}
<!-- 注意!这里引入样式:{{ content_form.media }} -->
</head>
<body>
<form action="{% url 'article' %}" method="post">
{% csrf_token %}
<label for="title">文章标题</label>
<input type="text" id="title" name="title" value="" required/>
<!-- 关键 -->
<label for="id_content">文章内容</label>
{{ content_form }}
<!-- 关键 -->
<button type="submit">保存</button>
</form>
</body>
</html>
注意!这里引入了样式:{{content_form.media}}
from django.http import HttpResponseRedirect
from django.shortcuts import render
from app.forms import ContentForm
from app.models import Article
def article(request):
context = {
'content_form': ContentForm()
}
if request.method == 'GET': # 获取空界面用于创建该文章的内容
return render(request, 'app/article.html', context=context)
if request.method == 'POST': # 新建文章
Article.objects.create(**request.POST)
return HttpResponseRedirect('在提交后一般的做法是前往文章列表页展示新文章')
简单起见,我就不在app中新建urls.py了,直接在主urls.py中写上下面的路由。
from django.urls import path
from django.conf.urls.static import static
from django.conf import settings
from app1.views import article
urlpatterns = [
...
path('article/', article, name='article'),
]
# 加入下面这个是为了使富文本可以上传图片视频等文件
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
# 加入下面这个是为了使富文本可以上传图片视频等文件
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
至此,大功告成。
再给你看看效果图和项目目录结构:
效果图:
项目目录结构: