Django集成Ueditor富文本编辑器到xadmin中

1. 将djangoueditor源码拷贝到项目根目录下
2. INSTALLED_APPS 中配置 'DjangoUeditor'

INSTALLED_APPS = [
    'DjangoUeditor',
]

3. 配置相关的url:

url(r'^ueditor/',include('DjangoUeditor.urls')),

4.在apps/courses/model.py 模型中定义字段类型

from DjangoUeditor.models import UEditorField


class Course(BaseModel):
    # 设置机构外键
    organization = models.ForeignKey(Organization,null=True,blank=True, on_delete=models.CASCADE, verbose_name='机构')
    teacher = models.ForeignKey(Teacher, on_delete=models.CASCADE, verbose_name='讲师')

    name = models.CharField(max_length=50, default='', verbose_name='课程名称')
    desc = models.CharField(max_length=300, default='', verbose_name='课程简介')
    learn_time = models.IntegerField(default=0, verbose_name='学习时长(分钟数)')
    degree = models.CharField(max_length=8, choices=(('Junior', '初级'), ('Medium', '中级'), ('Advanced', '高级')),
                              verbose_name='难度')
    students = models.IntegerField(default=0, verbose_name='学生人数')
    fav_nums = models.IntegerField(default=0, verbose_name='收藏人数')
    click_nums = models.IntegerField(default=0, verbose_name='点击人数')
    category = models.CharField(max_length=20, default='后端开发', verbose_name='课程种类')
    tag = models.CharField(max_length=10, default='', verbose_name='课程标签')
    youneed_now = models.CharField(max_length=300, default='', verbose_name='课程须知')
    notice = models.CharField(max_length=300,default='',verbose_name='课程公告')
    teacker_tell = models.CharField(max_length=300, default='', verbose_name='老师提示')

    # 富文本--------------------------------------------------------
    detail = UEditorField( verbose_name='课程详情',width=700,height=400,imagePath='courses/ueditor/images/',
                           filePath='courses/ueditor/files/',default='')
    # --------------------------------------------------------

    image = models.ImageField(upload_to='courses/%Y/%m', verbose_name='封面图', max_length=200)
    is_classics = models.BooleanField(default=False,verbose_name='是否经典课程')
    is_Banner = models.BooleanField(default=False,verbose_name='是否首页轮播')

5. 下载ueditor插件并放置到设置了代码源的extra_app目录下，另外一个替换掉site_packages目录下的Ueditor

链接:https://pan.baidu.com/s/1qlJzOyzqxRxCiQQ7Gsbn9g  密码:awhy

6. 将editor文件名配置到plugins目录下的__init__.py文件的PLUGINS变量中

/Users/makchikin/Downloads/pythonProjects/MxOnline01/xadmin/plugins/__init__.py

PLUGINS = (
    'ueditor',
)

7.在apps/courses/adminx.py

class NewCourseAdmin(object):
    # 要显示的字段
    list_display = ['name', 'desc', 'detail', 'degree', 'go_to','learn_time', 'students']
    # 可搜索的字段
    search_fields = ['name', 'desc', 'detail', 'degree', 'students']
    # 可过滤的字段 (外键过滤'teacher__name')
    list_filter = ['name', 'desc', 'teacher__name', 'detail', 'degree', 'learn_time', 'students']
    # 可编辑的字段
    list_editable = ['name', 'desc', 'degree', ]
    # 只读字段 (必填的字段不能放到这个字段来，否则报错)
    readonly_fields = ['click_nums', 'fav_nums', 'students','create_time']
    # 排除字段 (必填的字段不能放到这个字段来，否则报错)
    exclude = ['click_nums', 'fav_nums','create_time']
    # 设置默认排序(此处示例以点击数降序展示)
    ordering = ['-click_nums']
    # 图标
    model_icon = 'fa fa-book'  # awesome
    # model_icon = 'glyphicon glyphicon-search'  # bootstrap
    # 添加多张表
    inlines = [LessonInline,CourseResourseInline]
    # 添加富文本 detail表示model中富文本的字段 ------------------------------------------
    style_fields = {
        "detail": "ueditor"
    }

8.html 需要 用|safe 去除转义

<div class="tab_cont tab_cont1">
    {{ course.detail|safe }}
</div>

9.如果在xadmin中发现没有，查看一下浏览器资源加载路径

# 在执行服务器中 python manage.py collectstatic 后 Ueditor的所有静态资源会放到oss，但是加载的时候会在项目的静态路径中找资源

https://oss.cgmine.com/cgmine/static/ueditor/ueditor.config.js（OSS中，如果在此需要把Ueditor静态资源加载配置到OSS）
https://api.cgmine.com/cgmine/static/ueditor/ueditor.config.js（项目中，把项目/static/ueditor 文件夹复制到服务器即可）