Django-xadmin富文本ueditor编辑配置，并解决图片不显示的问题

首先下载 DjangoUeditor ：https://github.com/twz915/DjangoUeditor3

1. 安装DjangoUeditor

这是去官网下载并进行安装，但是不兼容python3
pip install DjangoUeditor
这里选择下载源码安装，考虑兼容性问题，进入压缩目录，执行以下安装语句
python setup.py DjangoUeditor

2. 可以将下载的源码放在项目中
   
3. 配置settings，添加app

INSTALLED_APPS = [
    'django.contrib.admin',
    ...
    # 富文本
    'DjangoUeditor',
]

4. 配置 url

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

5. models编写（主要是富文本的Text）

from DjangoUeditor.models import UEditorField
class UserAdvice(models.Model):
    advices = UEditorField(verbose_name='用户建议', width=600, height=300, 
         toolbars="full",imagePath="advices/ueditor/%(datetime)s.%(extname)s",
         filePath="advices/ueditor/%(datetime)s.%(extname)s", default='')

其中参数如下：

width，height :编辑器的宽度和高度，以像素为单位。
imagePath :图片上传后保存的路径
filePath : 附件上传后保存的路径，设置规则与imagePath一样

更详细的的参数介绍见：https://github.com/twz915/DjangoUeditor3

迁移数据库

makemigrations
migrate

6. 在 xadmin 中添加ueditor插件：extra_apps/xadmin/plugins目录下新建python文件：

# 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)

7. 在plugins目录下的__init__.py文件下将ueditor插件添加进入，否则xadmin不认识这个插件

PLUGINS = (
    'actions',
    'filters',
    .....
    'importexport',
    'ueditor'
)

8. adminx.py 设置，必须把设置成富文本的字段进行如下配置

class UserAdviceAdmin(object):
	...
    style_fields = {"advices":"ueditor"}

9. 配置media静态目录

如果不进行如下配置，图片显示不出来

# setting.py
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

# urls.py
from django.conf.urls import url, include
from rentingHouse.settings import MEDIA_ROOT
from django.views import static

urlpatterns = [
    url('^static/(?P<path>.*)$', static.serve, {'document_root': STATIC_ROOT}, name='static'),
    url(r'^media/(?P<path>.*)$',static.serve,{"document_root":MEDIA_ROOT},name='media'),
    # 富文本
    url(r'^ueditor/', include('DjangoUeditor.urls')),
]

配置好后看一下结果

前台配置：autoescape off 来清除样式

{% autoescape off %}
{{ advices }}
{% endautoescape %}

结果如下：

本节完