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