天天看点

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

至此,大功告成。

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

效果图:

在非admin页面使用 Django Ueditor

项目目录结构:

在非admin页面使用 Django Ueditor

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

对了,我有个微信公众号你要不要看一看?我连二维码都给你准备好了:

在非admin页面使用 Django Ueditor