专栏首页程序员的碎碎念在非admin页面使用 Django Ueditor(二)

在非admin页面使用 Django Ueditor(二)

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 migrate

2、新建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/'

至此,大功告成。

再给你看看效果图和项目目录结构:

效果图:

项目目录结构:

本文分享自微信公众号 - 程序员的碎碎念(gh_53e607dd4782),作者:米国队长

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-04-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Django Ueditor二次展示富文本内容(三)

    因为这次是二次展示,是有文章内容的,所以我们应该把文章内容按照富文本的原样格式放到富文本编辑器中展示出来,我们可以用js来实现:

    benny
  • django开发个人简易Blog——构建项目结构

    开发之前第一步,就是构造整个的项目结构。这就好比作一幅画,第一步就是描绘轮廓,有了轮廓,剩下的就是慢慢的填充细节。项目结构规划如下图: ? 项目结构描述: 本项...

    古时的风筝
  • django xadmin 集成DjangoUeditor富文本编辑器

    程序员同行者
  • 零基础使用Django2.0.1打造在线教育网站(二十六):xadmin的进阶开发

    努力与运动兼备~~~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

    编程思录
  • Django实战-信息资讯-路由配置

    Django网络应用开发的5项基础核心技术包括模型(Model)的设计,URL 的设计与配置,View(视图)的编写,Template(模板)的设计和Form(...

    小团子
  • Django+xadmin打造在线教育平台(十)

    代码 github下载 十四、xadmin的进阶开发 14.1.权限管理 (1)用户权限 超级用户拥有所有权限,其它添加的用户默认没有任何权限 进后台添加一个...

    zhang_derek
  • Django实战-信息资讯-UEditor文件上传

    Django网络应用开发的5项基础核心技术包括模型(Model)的设计,URL 的设计与配置,View(视图)的编写,Template(模板)的设计和Form(...

    小团子
  • Django实战-番外篇-tinymce富文本编辑器

    富文本编辑器在 web应用中使用广泛,比如 markdown、ueditor 等,像这些编辑器都有集成在 python 和 django 的第三方包。

    小团子
  • 听我说说我的博客: 月访问量过万的个人IT博客的技术史

    我的博客是如何工作的? HTTP服务器 当你开发在网页上访问我的博客的时候,你可能会注意到上面的协议是HTTPS。 ? 但是并不会察觉到它是HTTP2.0。而这...

    Phodal

扫码关注云+社区

领取腾讯云代金券