Django使用xadmin结合富文本编辑器uedtior

django 有一个封装好的admin后台管理系统，如果不能满足需求，可以使用第三方插件xadmin，xadmin的安装和使用可以参考git https://github.com/sshwsfc/xadmin

对后台进行编辑的时候，有时需要上传图片之类更丰富的文本操作，这样就需要富文本编辑器，本文介绍使用百度开源的富文本编辑器ueditor,由于该编辑器较早产生，目前不支持python3，只支持python2，因此需要将源码包下载下来，并直接放在项目下的extra_apps 下，如下图

以下案例在pycharm的IDE下进行xadmin和ueditor的设置，

步骤：

1.将djangoueditor添加到项目的setting.py文件中

#在项目的setting下进行以下设置
INSTALLED_APPS = [
    ...
    'DjangoUeditor',
]

2.添加到项目的url.py的urlpattern下

#在url下添加富文本编辑器文档
urlpatterns = [
    ……
    url(r'^ueditor/',include('DjangoUeditor.urls')),
]

3.修改需要使用富文本编辑器的module

在model中将需要修改富文本编辑器的字段（一般为详情之类的字段）类型多为TextField

#以下为案例举例
from DjangoUeditor.models import UEditorField

class Goods(models.Model):
    ……
   good_desc=UEditorField(u'内容',width=1000,height=300,imagePath='goods/images/',filePath='goods/files/',default='')

4. 在xadmin的目录下添加插件ueditor

因为本文中的案例在extra_apps下添加了xadmin插件，所以是在xadmin的目录下plugin的文件夹里新建一个ueditor.py的文件

内容如下：

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)

5.把ueditor添加到plugin的__init__.py文件中

PLUGINS = (
    ...
    'ueditor',
)

6.将ueditor添加到adminx.py中（是需要使用富文本编辑器的应用目录下的adminx.py文件中）

class Goodsxadmin(object):
        ……
     # 添加这个字段才能显示富文本的图片，否则只显示连接
    style_fields={'good_desc':'ueditor'}

7.前端页面为了防止富文本编辑器出现转义，需要设置

{% autoescape off %}
{{ goods.good_desc }}
{% endautoescape %}
或者
{{ goods.good_desc|safe}}

以上就是对富文本编辑器的设置，运行程序，进入xadmin后台，就可以看到富文本编辑器的内容了