在非admin页面使用 Django Ueditor

最新推荐文章于 2022-01-17 21:47:48 发布

aman1688

最新推荐文章于 2022-01-17 21:47:48 发布

阅读量409

点赞数 1

分类专栏： Django 文章标签： django python web html

本文链接：https://blog.csdn.net/haifeng10001/article/details/105206227

版权

Django 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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/'

至此，大功告成。

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

效果图：
在这里插入图片描述
项目目录结构：

下一篇：Django Ueditor之原样展示已有的富文本内容到富文本编辑器

对了，我有个微信公众号你要不要看一看？我连二维码都给你准备好了：
在这里插入图片描述

aman1688

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
在非admin页面使用 Django Ueditor

Django Ueditor的安装和在admin页面的使用请看，接下来的内容是基于这篇文章的环境进行的：如何使用 Django Ueditor，如果你按照下面的流程来做还有关于Ueditor的报错，很有可能是没有装好环境。。总体流程以文章模型为例1、创建文章模型2、创建该文章模型的Form3、写个html界面4、写个视图函数article()，并提供这个Form给前端渲染5、...
复制链接

扫一扫

专栏目录