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

    转载文章请注明作者和出处,谢谢!
  • 相关阅读:
    MOSS产品概述[转帖]
    学习WF笔记9自定义活动示例(6)
    MOSS之五母版页 布局页 Features[转帖]
    MOSS系列之四用户组和用户[转帖]
    MOSS之六Web Part[转帖]
    MOSS系列之三列表和文档库[转帖]
    学习WF笔记9自定义活动的外观(5)
    学习WF笔记9 自定义活动中事件类型的属性(3)
    MOSS系列之二(MOSS安装)[转帖]
    学习WF笔记9自定义活动的验证方式(4)
  • 原文地址:https://www.cnblogs.com/dyfblogs/p/14961363.html
Copyright © 2011-2022 走看看