django+xamdin集成UEditor

最新推荐文章于 2023-04-16 23:22:35 发布

weixin_34413065

最新推荐文章于 2023-04-16 23:22:35 发布

阅读量110

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2396236/blog/1329880

本文介绍如何在Django项目中集成UEditor富文本编辑器，包括安装配置步骤及在模型和管理界面中的使用方法。

2019独角兽企业重金招聘Python工程师标准>>>

xadmin采用的是源代码引入到项目中的方式集成

我们使用djangoUEditor这个插件
github地址：https://github.com/zhangfisher/DjangoUeditor

步骤：

##1、安装方法

* 方法一：将github整个源码包下载回家，在命令行运行：
	python setup.py install
* 方法二：使用pip工具在命令行运行(推荐)：
    pip install DjangoUeditor

##2、在Django中安装DjangoUeditor 在INSTALL_APPS里面增加DjangoUeditor app，如下： INSTALLED_APPS = ( #........ 'DjangoUeditor', )

##3、配置urls url(r'^ueditor/',include('DjangoUeditor.urls' )),

##4、在models中的使用

Course中detail字段使用了UEditorField的类型，引入：

from DjangoUeditor.models import UEditorField

class Course(models.Model):
    name = models.CharField(max_length=20,verbose_name=u'课程名')
    desc = models.CharField(max_length=300,default=u'',verbose_name=u'课程描述')
    detail =UEditorField(verbose_name=u'课程详情',width=600, height=300, imagePath="ueditor/image", filePath="ueditor/file", upload_settings={"imageMaxSize":1204000},settings={},command=None,blank=True)
    degree=models.CharField(choices=(('cj',u'初级'),('zj',u'中级'),('gj',u'高级')),max_length=2,verbose_name='难度')
    learn_times = models.IntegerField(default=0,verbose_name=u'学习时长')
    students = models.IntegerField(default=0,verbose_name=u'学生人数')
    fav_num = models.IntegerField(default=0,verbose_name=u'收藏人数')
    image = models.ImageField(upload_to='courses/%Y/%m',verbose_name=u'课程图片',max_length=100)
    click_num = models.IntegerField(default=0,verbose_name=u'点击数')
    add_time = models.DateTimeField(default=datetime.now,verbose_name=u'添加时间')
    teacher = models.ForeignKey(Teacher,null=True,blank=True,verbose_name=u'老师')
    category = models.CharField(max_length=20,verbose_name='类别',default='后端开发')
    tag = models.CharField(max_length=20,verbose_name='标签',default='')
    must_know = models.CharField(max_length=100,verbose_name='课程须知',default='')
    teacher_tips = models.CharField(max_length=100,verbose_name='老师提示',default='')
    is_banner = models.BooleanField(verbose_name='是否显示在banner中',default=False)

##5、adminx.py中，对应的Course类的CourseAdmin下，增加style_fields = {'detail':'ueditor'}

class CourseAdmin(object):
    list_display = ['name', 'desc', 'degree', 'learn_times', 'students', 'fav_num','click_num'];
    search_fields = ['name', 'desc','detail', 'degree', 'students'];
    list_filter = ['name', 'desc', 'detail', 'degree', 'learn_times', 'students'];
    model_icon = 'fa fa-battery-three-quarters'
    ordering=['-learn_times']
    readonly_fields = ['fav_num']
    exclude = ['students']
    refresh_times = [2,5]
    inlines = [LessonInline]
    list_editable = ['desc']
    style_fields = {'detail':'ueditor'}

##6、在xadmin的plugins文件夹下，新增加ueditor.py插件脚本，脚本内容：

# _*_ coding:utf-8 _*_
__author__ = 'Bruse'
__date__ = '2017-01-27 14:48'

import xadmin
from xadmin.views import BaseAdminPlugin, CreateAdminView, ModelFormAdminView, UpdateAdminView
from DjangoUeditor.models import UEditorField
from DjangoUeditor.widgets import UEditorWidget
from django.conf import settings


class XadminUEditorWidget(UEditorWidget):
    def __init__(self,**kwargs):
        self.ueditor_options=kwargs
        self.Media.js = None
        super(XadminUEditorWidget,self).__init__(kwargs)

class UeditorPlugin(BaseAdminPlugin):

    def get_field_style(self, attrs, db_field, style, **kwargs):
        if style == 'ueditor':
            if isinstance(db_field, UEditorField):
                widget = db_field.formfield().widget
                param = {}
                param.update(widget.ueditor_settings)
                param.update(widget.attrs)
                return {'widget': XadminUEditorWidget(**param)}
        return attrs

    def block_extrahead(self, context, nodes):
        js = '<script type="text/javascript" src="%s"></script>' % (settings.STATIC_URL + "ueditor/ueditor.config.js")         #自己的静态目录
        js += '<script type="text/javascript" src="%s"></script>' % (settings.STATIC_URL + "ueditor/ueditor.all.min.js")   #自己的静态目录
        nodes.append(js)

xadmin.site.register_plugin(UeditorPlugin, UpdateAdminView)
xadmin.site.register_plugin(UeditorPlugin, CreateAdminView)

##7、在plugins的__init__.py文件下，加入插件的名称：'ueditor',
这样就可以在xadmin后台看看该字段的样式了。
##8、假如在后台编辑UEditor字段，发现前台展现乱码时候，需要在模板该字段下，使用{% autoescape off %}来包裹。例如：

{% autoescape off %}{{ course.detail }}{% endautoescape %}

转载于:https://my.oschina.net/u/2396236/blog/1329880