码迷,mamicode.com
首页 > 其他好文 > 详细

Django的Xadmin后台集成富文本Ueditor

时间:2021-07-02 15:51:54      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:escape   环境   div   文本编辑   obj   富文本   admin   efault   search   

我的环境是:Python3.7 + Django2.2

Ueditor:UEditor是由百度开源的富文本编辑器,具有轻量、可定制、用户体验优等特点。

DjangoUeditor:是基于Ueditor的用于Django的富文本编辑器。

DjangoUeditor的使用
1.下载对应版本的DjangoUeditor的zip:
Python3:https://github.com/twz915/DjangoUeditor3
Python2:https://github.com/zhangfisher/DjangoUeditor
2.然后将下载的zip解压,将解压后的文件目录下的DjangoUeditor复制到自己的django工程目录下。
3.settings.py文件中注册DjangoUeditor:

INSTALLED_APPS = [
    ‘DjangoUeditor‘,
]

4.urls.py中添加DjangoUeditor的路由:

urlpatterns = [
    path(‘ueditor/‘, include(‘DjangoUeditor.urls‘)),
]

5.在Django工程的app的models.py中使用DjangoUeditor:

from django.db import models
from DjangoUeditor.models import UEditorField


class Article(models.Model):
    name = models.CharField(max_length=50, verbose_name=u"文章名")
    desc = models.CharField(max_length=300, verbose_name=u"文章描述")
    detail = UEditorField(verbose_name=u"文章详情",width=600, height=300, imagePath="article/ueditor/", 
                        filePath="article/ueditor/", default="")
    
    class Meta:
        verbose_name = u"文章"
        verbose_name_plural = verbose_name

6.在要应用DjangoUeditor的app的adminx.py中设置model中使用富文本的字段显示:

import xadmin

from .models import Article


class ArticleAdmin(object):
    list_display = [‘name‘, ‘desc‘, ‘detail‘]
    search_fields = [‘name‘, ‘desc‘, ‘detail‘]
    list_filter = [‘name‘, ‘desc‘, ‘detail‘]

    # 集成富文本
    style_fields = {‘detail‘: ‘ueditor‘}


xadmin.site.register(Article, ArticleAdmin)

7.在Django工程的templates下对应的HTML文件中使用富文本的字段时需要设置 autoescape off

<div class="tab_cont tab_cont1">
    {% autoescape off %}
    {{ article.detail }}
    {% endautoescape %}
</div>

最后启动Django调试服务器,进入xadmin后台查看对应表应用了UEditorField的字段是否显示和具有富文本功能。

Django的Xadmin后台集成富文本Ueditor

标签:escape   环境   div   文本编辑   obj   富文本   admin   efault   search   

原文地址:https://www.cnblogs.com/dyfblogs/p/14961363.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有
迷上了代码!