在非admin页面使用 Django Ueditor（二）
在非admin页面使用 Django Ueditor（二）
benny
发布于 2020-04-23 13:47:42
发布于 2020-04-23 13:47:42
Django Ueditor的安装和在admin页面的使用请看，接下来的内容是基于这篇文章的环境进行的：使用 Django Ueditor 富文本编辑器（一），如果你按照下面的流程来做还有关于Ueditor的报错，很有可能是没有装好环境。。
总体流程
以文章模型为例
1、创建文章模型
2、创建该文章模型的Form
3、写个html界面
4、写个视图函数article()，并提供这个Form给前端渲染
5、写个路由，并配置好settings.py文件
具体实现过程
在app中：
1、创建文章模型
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 migrate2、新建forms.py并创建该文章模型的Form
在这里我只对该文章模型的富文本字段创建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}}
4、写个view
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('在提交后一般的做法是前往文章列表页展示新文章')1、写个路由
简单起见，我就不在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)2、在settings.py中添加：
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
# 加入下面这个是为了使富文本可以上传图片视频等文件
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'至此，大功告成。
再给你看看效果图和项目目录结构：
效果图：
项目目录结构：
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-04-09，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录