zoukankan      html  css  js  c++  java
  • Django的Xadmin后台集成富文本Ueditor

    我的环境是: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的字段是否显示和具有富文本功能。

    本文作者:温茶又折花

    本文链接: https://www.cnblogs.com/dyfblogs/p/14961363.html

    转载文章请注明作者和出处,谢谢!
  • 相关阅读:
    洛谷 1498 南蛮图腾——模拟
    bzoj 4198 [Noi2015]荷马史诗——哈夫曼树
    bzoj 1026 [SCOI2009]windy数——数位dp水题
    bzoj 1045 [HAOI2008] 糖果传递——设变量推式子
    bzoj 4521 [Cqoi2016]手机号码——数位dp
    bzoj1044 [HAOI2008]木棍分割——前缀和优化DP
    bzoj1090 [SCOI2003]字符串折叠——区间DP
    bzoj1911 [Apio2010]特别行动队——斜率优化DP
    bzoj1025 [SCOI2009]游戏——因数DP
    bzoj1207 [HNOI2004]打鼹鼠——LIS
  • 原文地址:https://www.cnblogs.com/dyfblogs/p/14961363.html
Copyright © 2011-2022 走看看